一、js获取class属性的值
有时候需要根据元素的class属性来获取元素，可以使用 document.getElementByClassName() 或者 document.querySelector() 方法。
var element = document.querySelector('.class-name');
var classValue = element.getAttribute('class');
console.log(classValue); // 输出class属性的值
通过上述代码，可以获取到元素的class属性的值。
二、js获取到data里的数据
获取data属性的值，可以使用 element.getAttribute(‘data-attr’) 或者 element.dataset.attrName 方法，其中 attrName 是 data- 后面的名称。
// 获取data属性值方法1
var element = document.querySelector('.data-element');
var dataValue1 = element.getAttribute('data-name');
console.log(dataValue1); // 输出data-name属性的值
// 获取data属性值方法2
var dataValue2 = element.dataset.name;
console.log(dataValue2); // 输出data-name属性的值
上述代码中，可以发现两种方法获取data属性的值，注意要写成data-后面的名称。
三、js获取name属性的值
获取name属性的值，可以使用 element.getAttribute(‘name’) 方法。
var element = document.querySelector('.name-element');
var nameValue = element.getAttribute('name');
console.log(nameValue); // 输出name属性的值
获取name属性的值比较简单，使用方法比较简单，只需要写上name属性的名称即可。
四、js中data属性的作用
data属性的作用就是存储额外的数据，这些数据不会在页面显示，但是可以被JavaScript使用。
可以使用 element.dataset.attributeName 或者 element.getAttribute(‘data-attribute-name’) 来访问属性的值。
五、js设置data属性
设置属性值，可以使用 element.dataset.attributeName 或者 element.setAttribute(‘data-attribute-name’, ‘value’) 方法。
var element = document.querySelector('.data-element');
element.dataset.name = 'New Value'; // 设置一个新值
console.log(element.getAttribute('data-name')); // 输出 New Value
上述代码中，先获取到element元素，然后设置data-name属性的值为New Value。通过getAttribute方法可以获取到设置后的值。
六、js中data属性
data- 属性定义自定义数据属性，可以使用dataset属性或element.getAttribute(‘data-attribute-name’) 方法来获取。
// HTML代码片段
<div class="example" data-user="user123">示例</div>
// JavaScript代码，显示data-user属性的值
var elem = document.querySelector('.example');
console.log(elem.dataset.user); // 输出 user123
console.log(elem.getAttribute('data-user')); // 输出 user123
七、js获取自定义属性data的值
自定义属性data的值，可以使用element.dataset.attributeName 或者 element.getAttribute(‘data-attribute-name’)来获取。
// HTML代码片段
<div class="example" data-user="user123">示例</div>
// JavaScript代码，显示data-user属性的值
var elem = document.querySelector('.example');
console.log(elem.dataset.user); // 输出 user123
console.log(elem.getAttribute('data-user')); // 输出 user123
八、js获取对象属性名
可以使用 Object.keys() 方法获取对象包含的所有属性名。
var obj = {a:1, b:2, c:3};
Object.keys(obj); // 输出 ['a', 'b', 'c']
注意，该方法不包括原型中的属性。
九、js获取对象属性
有两种方法获取对象属性值，分别是使用 obj.key 或者 obj[‘key’]。
var obj = {a:1, b:2, c:3};
console.log(obj.a); // 输出 1
console.log(obj['b']); // 输出 2
上述代码中，既可以使用.操作符，也可以使用[]操作符来获取对象的属性值。
十、js获取对象的属性和值
可以使用for…in循环来获取对象的属性和值。
var obj = {a:1, b:2, c:3};
for(var key in obj){
console.log(key + ': ' + obj[key]);
}
// 输出 a: 1
// b: 2
// c: 3
上述代码中，通过遍历对象属性名称，再通过[]操作符获取属性值，最终可以输出属性和属性值。
JavaScript中获取data属性的方法有多种，可以根据实际需要使用不同的方法获取属性的值。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/300248.html
微信扫一扫 
支付宝扫一扫 