一、属性类型与属性值
在JS中，属性可分为两大类：内置属性和自定义属性。内置属性是已经存在的，无需添加，比如元素的class、id、src等。而自定义属性是通过JS来添加的，可以按需求随意添加。只要掌握了JS添加属性的方法，自定义属性可以满足我们对元素属性的多种需求。
添加属性时，最重要的是确定属性值，属性值可以是字符串、数值、布尔值及函数等各种类型。从属性值的角度来看，JS中的属性可以大致分为以下几种：
1.字符串属性：例如title、src、class等 2.数值属性：例如width、height等 3.布尔属性：例如disabled、checked等 4.函数属性：例如onclick、onblur等，其值为函数的名称或自定义函数
二、setAttribute方法添加属性
在JS中，setAttribute方法是最常用的添加属性方法之一。该方法用来为某个元素设置属性及其对应的值。
//示例代码：为id为"myDiv"的元素添加data-index属性，属性值为1
var myDiv = document.getElementById("myDiv");
myDiv.setAttribute("data-index", "1");
该方法接收两个参数，第一个参数是要添加属性的属性名，第二个参数是属性值。通过该方法添加的属性会自动转换为字符串类型。
三、直接设置属性值
除了使用setAttribute方法之外，还可以通过直接设置元素的属性值来添加属性。不过需要注意的是，这种方法只适用于非布尔属性。布尔属性可以直接通过简单的赋值语句来添加，赋值为true或false即可。
//示例代码：直接为id为"myDiv"的元素添加data-index属性，属性值为1
var myDiv = document.getElementById("myDiv");
myDiv.data-index = 1;
//添加布尔属性checked
var checkbox = document.getElementById("myCheckbox");
checkbox.checked = true;
四、使用dataset添加自定义属性
若要添加一个自定义属性，可以使用dataset属性，通过该属性将自定义属性添加到元素上。dataset属性可以读取元素上所有以”data-“开头的属性，并转换成驼峰命名法。
//示例代码：为id为"myDiv"的元素添加data-index属性，属性值为1
var myDiv = document.getElementById("myDiv");
myDiv.dataset.index = 1;
该方法添加的属性会自动转换为字符串类型，属性名不需要添加”data-“前缀。
五、在HTML代码中添加属性
除了通过JS来添加属性，也可以在HTML代码中直接添加属性。并且JS也可以访问在HTML代码中添加的属性。
//HTML代码
<div id="myDiv" data-index="1"></div>
//JS代码
var myDiv = document.getElementById("myDiv");
console.log(myDiv.dataset.index); //输出1
六、总结
JS添加属性是日常开发中不可或缺的功能之一，通过本文，我们了解到了多种方法来添加不同类型的属性，将为我们的开发工作提供更便捷、快捷的操作方式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186256.html
微信扫一扫 
支付宝扫一扫 