JavaScript中獲取data屬性的使用

一、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屬性的方法有多種，可以根據實際需要使用不同的方法獲取屬性的值。