获取属性值
方法1,element.属性
方法2,element.getAttribute('属性')
;
区别:
element.属性 获取内置属性值(元素本身自带的属性)。它不能获取到自定义属性。如果用它获取自定义属性,即使自定义属性有值也是返回undefined
element.getAttribute(‘属性’);
主要获得自定义的属性 (标准) 我们程序员自定义的属性。虽然它也可以获取到内置的属性值。
设置属性值
方法1,element.属性 = ‘值’
方法2,element.setAttribute('属性', '值');
自定义属性的操作
区别:
element.属性 设置内置属性值
element.setAttribute(‘属性’); 主要设置自定义的属性 (标准。 虽然它也可以设置内置的属性值。
注意用这种方式设置class就是element.setAttribute(‘lalss’,值);而不是className
移除属性
element.removeAttribute('属性');
H5自定义属性
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
自定义属性获取是通过getAttribute(‘属性’) 获取。
但是有些自定义属性很容易引起歧义,不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性:
1. 设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。 比如
<div data-index=“1”></div>
或者使用 JS 设置
element.setAttribute(‘data-index’, 2)
2. 获取H5自定义属性
- 兼容性获取
element.getAttribute(‘data-index’);
- H5新增
element.dataset.index
或者element.dataset[‘index’]
ie 11才开始支持 ,兼容不太好,所以一般都用第一种方法获取
dataset是一个集合,存放了所有以data-开头的自定义属性
注意:如果data-的自定义属性名称中还有 - ,那么第二种方法就要用驼峰来获取
<div getTime="20" data-index="2" data-list-name="andy"></div>
console.log(div.getAttribute('data-list-name'));
console.log(div.dataset.listName);
console.log(div.dataset['listName']);