获取Input标签自定义属性的值

最新推荐文章于 2021-05-25 17:45:27 发布
转载 最新推荐文章于 2021-05-25 17:45:27 发布 · 2.4k 阅读 · 0
文章标签：

#input #HTML #自定义属性

本文介绍了如何在JavaScript中正确地获取HTML元素上的自定义属性值，特别是针对非标准属性如'busCode'的处理方式，并提供了正确的代码示例。

转载自：https://www.cnblogs.com/orac/p/6018529.html
HTML代码：

JavaScript代码：

因为busCode不是input标签原生的属性，所以不能使用”点”操作。

非标准属性，要用：obj.getAttribute(“busCode”);的方式。

错误的用法：var data = obj.busCode;

var data = document.getElementById(“ID”).getAttribute(‘busCode’);

自定义属性是比较好用的，尤其是表单中用来存放数据信息。

DOM（一）：获取页面元素、操作元素、自定义属性
weixin_53912712的博客
12-23 2142
获取页面元素、操作元素
JS和jQuery通过this获取html标签中的属性值(实例代码)
10-19
本文将探讨如何通过 `this` 关键字来获取 HTML 标签中的属性值，提供实例代码供读者参考。 首先，我们来看 `this` 在 JavaScript 中的作用。在事件处理函数中，`this` 指向触发该事件的元素。因此，当我们把一个...
获取input属性值
山河野
05-25 482
$(":input[mappingfield=copies]").val() $(“textarea[mappingfield=‘copy_to’]”).val()
获取input标签的所有属性
透明大脑
06-27 2123
用jquery $("input[name='btnAdd']").attr("value") 获取value属性值，其它属性换attr的参数就OK
layui的select获取自定义属性和默认选中
个人中心
04-19 1590
<span class="color-green">加班选择</span> <select name="is_cargo" class="layui-input" lay-filter="test"> <option data-id="996" value="1">996</option> <option data-id="007" value="2">007</option> </select>
如何获取Input标签自定义属性的值
wcfjyx的博客
07-06 7191
如何获取Input标签自定义属性的值 <input type="text" id="aaa" data="666" /> 要获取id为aaa的自定义data值 原生js方式： var data = document.getElementById("aaa").getAttribute("data"); jquery方式：var data = $("#aaa").at...
jquery遍历标签中自定义的属性方法
10-21
例如，我们可以使用`$("input[name^='clssId']")`来获取所有`name`属性值以`'clssId'`开头的输入框元素，并获取它们的值： ```javascript $("input[name^='clssId']").val(); ``` 同样，如果要查找`id`属性有一定...
JQuery中根据属性或属性值获得元素(6种情况获取方法)
12-03
根据属性值获得元素 1.$。在jQuery 中$(“”)，这个语法等同于$(document.createElement(“span”)) ，这是一种用法，在选择元素的时候还会这样子的用：[attribute$=value]，匹配给定的属性是以某些值结尾的元素。...
jquery自定义属性(类型/属性值)
10-27
在本段文档中涉及到的知识点主要集中在使用jQuery来创建和操作自定义属性的动态添加。文档详细描述了一个功能实现的过程，允许用户通过下拉菜单选择要创建的HTML元素类型（图片、文本框、按钮等），随后再选择要设置...
开发常用 -- 校验表单 -- 各种常用组织代码的校验-正则
小草莓的博客
03-10 1197
统一社会信用代码校验规则、组织机构代码校验规则、工商营业执照校验规则、税务登记校验
input标签自定义属性
qq_41589580的博客
01-31 3632
&lt;input type="text" value="${name}"  id="nameId" namecode = "${namecode}" /&gt; JavaScript代码： 因为namecode 不是input标签原生的属性，所以不能使用"点"操作。 非标准属性，要用：obj.getAttribute("namecode ");的方式。 错误的用法
获取input的属性/自定义属性的值
user_undefined的博客
12-25 1472
获取input本身属性（value、name等），可以用—KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲id").value;/("#id").name; 但是获取input的自定义属性，就要用—$("#id").getAttribute(‘flag’) （flag为自定义属性） ...
jquery获取input框属性值
weixin_39218464的博客
04-24 2620
这个问题包含两个方面：jquery选择器（即针对你指定的那个input元素）和获取内容（即获得输入的值），所以综合起来有如下代码可以实现 $("input#test").val(); // 推荐这种方式，因为id是唯一的 $("input[name='test']").val(); // 此时需要e69da5e887aae79fa5e9819331333337393033注意是否有...
如何获取input输入框中的值？
热门推荐
xm2by的博客
06-05 4万+
如何获取input输入框中的值？ 1、javascript
js对已经获取自定义属性值（布尔值）进行修改
最新发布
05-10
<think>好的，我现在需要帮用户解决如何在JavaScript中修改元素的自定义属性值为布尔类型的问题。首先，我需要回忆一下相关的知识，并结合用户提供的引用内容来找到正确的解决方案。 用户提到他们想修改已获取的自定义属性值，并且这个值是布尔类型。根据引用中的内容，特别是引用[2]和引用[5]，布尔属性在HTML中通常表现为存在或不存在，比如disabled属性。不过用户这里讨论的是自定义属性，而不仅仅是HTML标准的布尔属性。 首先，我需要区分HTML属性和JavaScript对象的属性。在引用[1]中，用户展示了如何通过JavaScript直接给元素添加自定义属性，比如aBtn[i].abc = 123;。这说明在JavaScript中，可以直接给DOM元素对象添加任意属性，但这些属性不会反映在HTML标签上，只是存在于内存中。如果用户需要将自定义属性保存在HTML标签中，应该使用data-*属性，如引用[3]提到的，使用getAttribute来获取data-自定义属性。 但用户的问题是关于修改自定义属性的布尔值。假设用户有两种情况：一种是使用JavaScript对象属性（如element.customProp = true），另一种是使用HTML的data-*属性（如element.setAttribute('data-custom', 'true')）。不过，HTML属性只能是字符串类型，所以存储布尔值时需要转换。 根据引用[5]，提到布尔值比较和自定义属性，需要注意数据类型转换。当使用setAttribute设置属性时，无论传入什么类型，都会被转换为字符串。因此，如果用户使用setAttribute('data-flag', true)，实际存储的是字符串'true'。而通过JavaScript属性访问时，如element.dataset.flag，得到的也是字符串，而不是布尔值。 所以，正确的做法应该是，当需要将自定义属性作为布尔值使用时，在设置时将其转换为字符串（如'true'或'false'），然后在获取时再将其转换回布尔值。或者，如果用户只是想在JavaScript对象中使用自定义属性而不需要反映到HTML上，可以直接给元素对象添加属性，如element.myBoolean = true，这时类型会保留为布尔型。 此外，引用[4]中的示例展示了如何通过JavaScript操作表单元素的value和type属性，这说明直接修改元素的JavaScript属性是可行的，并且类型可以保持。因此，如果用户不需要将属性存储在HTML中，直接使用元素对象的自定义属性会更方便，类型也不会被转换。 总结可能的步骤： 1. 如果使用HTML data-*属性，存储为字符串，并在获取时转换。 2. 如果使用JavaScript对象属性，直接赋值布尔值即可，但不会反映在HTML标签上。 3. 修改布尔属性时，注意使用正确的方法，比如setAttribute或直接属性访问。 需要提醒用户注意HTML属性和JavaScript属性之间的区别，以及数据类型转换的问题，避免出现预期外的行为。</think>在JavaScript中修改元素的自定义布尔属性值需根据属性类型选择不同方法，具体分为以下两种场景： ### 一、操作HTML自定义属性（data-*属性） 若属性需保留在HTML标签中，应遵循W3C规范使用data-*属性： ```javascript // 设置布尔值属性（自动转换为字符串） element.setAttribute('data-disabled', true); // 获取时需手动转换类型 const isDisabled = element.getAttribute('data-disabled') === 'true'; ``` ### 二、操作JavaScript对象属性 若仅需在内存中使用布尔值属性，可直接操作DOM元素对象： ```javascript // 设置布尔类型属性 element.isActive = true; // 获取时直接使用布尔值 console.log(element.isActive); // true ``` ### ▋关键区别说明表 | 特性 | HTML自定义属性 | JavaScript对象属性 | |---------------------|-----------------------------------|----------------------------| | 存储位置 | HTML标签内（可通过检查元素查看） | 内存中 | | 数据类型 | 强制转为字符串 | 保留原始类型 | | 设置方法 | setAttribute() | 直接赋值 | | 读取方法 | getAttribute() | 直接访问 | | 规范建议 | 建议使用data-*前缀 | 无命名限制 | ### ▋最佳实践建议 1. 需要持久化存储的属性应使用data-*格式，例如表单状态保存[^2] 2. 临时状态建议使用对象属性，例如动画标记位： ```javascript // 设置滚动状态标记 element.isScrolling = false; // 事件监听中修改状态 window.addEventListener('scroll', () => { element.isScrolling = true; }); ``` ### ▋注意事项 1. 通过dataset接口访问data-*属性时，属性名会自动转换为驼峰格式： ```javascript element.dataset.userName = 'John'; // 对应data-user-name属性 ``` 2. 布尔属性在HTML中的标准用法是存在/不存在形式，如`<input disabled>`，这种原生属性可通过`element.disabled = true`直接修改[^2]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值