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方法来获取这个自定义属性的值。