JS自定義屬性的神奇用途

一、JS自定義屬性怎麼獲取

JS自定義屬性，即通過JavaScript代碼為HTML元素添加的屬性。要獲取JS自定義屬性，可以使用元素的getAttribute方法。

// HTML代碼
<div id="myDiv" data-myAttr="hello"></div>

// JS代碼
var myDiv = document.getElementById("myDiv");
var myAttrValue = myDiv.getAttribute("data-myAttr");
console.log(myAttrValue); // 輸出：hello

上述示例中，我們為div元素添加了一個名為”data-myAttr”的屬性，其值為”hello”。我們通過getElementById方法獲取到這個元素，並使用getAttribute方法獲取到”data-myAttr”屬性的值。

二、JS自定義屬性不能用class

JS自定義屬性與class是兩個不同的概念。JS自定義屬性是指通過JavaScript代碼為HTML元素添加的屬性，而class是HTML元素自帶的屬性。我們不能通過JS自定義屬性來替代class屬性。

下面是一個示例，我們已經為元素設置了class屬性，但如果我們希望再添加一個屬性，我們應該使用JS自定義屬性而不是覆蓋class屬性。

// HTML代碼
<div id="myDiv" class="myClass" data-myAttr="hello"></div>

// JS代碼
var myDiv = document.getElementById("myDiv");
var myAttrValue = myDiv.getAttribute("data-myAttr");
console.log(myAttrValue); // 輸出：hello

三、JS自定義屬性賦值選取

我們可以使用JavaScript來為HTML元素添加自定義屬性。要添加自定義屬性，可以使用元素的setAttribute方法。

// HTML代碼
<div id="myDiv"></div>

// JS代碼
var myDiv = document.getElementById("myDiv");
myDiv.setAttribute("data-myAttr", "hello");
console.log(myDiv.getAttribute("data-myAttr")); // 輸出：hello

在上述示例中，我們使用setAttribute方法為div元素添加了一個”data-myAttr”的屬性，值為”hello”。我們可以使用getAttribute方法獲取到這個屬性的值。

四、JS自定義屬性在事件處理中的應用

JS自定義屬性在事件處理中應用廣泛。我們可以使用自定義屬性來記錄一些與事件處理相關的數據，例如事件發生的位置，或者與事件相關的其他元素。

// HTML代碼
<div id="myDiv" data-x="0" data-y="0"></div>

// JS代碼
var myDiv = document.getElementById("myDiv");

myDiv.addEventListener("click", function(event) {
  var x = event.clientX + "px";
  var y = event.clientY + "px";
  
  myDiv.setAttribute("data-x", x);
  myDiv.setAttribute("data-y", y);
});

myDiv.addEventListener("mouseenter", function() {
  var x = myDiv.getAttribute("data-x");
  var y = myDiv.getAttribute("data-y");
  
  // 在滑鼠懸停時顯示之前記錄的坐標
  console.log("x=" + x + ", y=" + y);
});

在上述示例中，我們為div元素添加了兩個自定義屬性”data-x”和”data-y”，用來記錄div元素在頁面上的位置。我們為div元素綁定了click和mouseenter事件，當滑鼠在div元素上點擊時，我們記錄下滑鼠的位置，並將位置信息保存在自定義屬性中。當滑鼠懸停在div元素上時，我們使用getAttribute方法獲取之前保存的位置信息。

五、JS自定義屬性與CSS的結合應用

JS自定義屬性與CSS的結合應用很方便。我們可以使用自定義屬性來動態地改變元素的樣式，而不需要在JavaScript中直接操作CSS。

// HTML代碼
<p id="myPara" data-color="red">Hello, World!</p>

// CSS代碼
[data-color="red"] {
  color: red;
}

// JS代碼
var myPara = document.getElementById("myPara");
myPara.addEventListener("click", function() {
  myPara.setAttribute("data-color", "blue");
});

在上述示例中，我們為p元素添加了一個”data-color”自定義屬性，用來控制元素的顏色。我們使用CSS選擇器來選擇所有”data-color”屬性值為”red”的p元素，並將它們的顏色設置為紅色。在JavaScript中，我們在點擊p元素時修改其”data-color”屬性值為”blue”，從而改變它的顏色。

六、JS自定義屬性在數據存儲中的應用

JS自定義屬性在數據存儲中的應用非常靈活。我們可以使用自定義屬性來存儲數據，例如在移動應用開發中記錄用戶的偏好設置，或者在Web應用開發中存儲用戶登錄信息。

// HTML代碼
<input id="username" type="text" name="username" data-userId="123456">

// JS代碼
var usernameInput = document.getElementById("username");
var userId = usernameInput.getAttribute("data-userId");

在上述示例中，我們為一個input元素添加了一個”data-userId”自定義屬性，用來存儲用戶的ID。在JavaScript中，我們使用getAttribute方法來獲取這個自定義屬性的值。