js设置和获取自定义属性的方法

关于JS设置和获取自定义属性的方法，我们可以分为以下两种：

1. 使用.dataset属性

通过设置dataset属性，我们可以在HTML元素中定义自定义属性，这些属性可以是任何名称，并且可以作为一个无结构数据来处理，类似于JSON格式的键值对。

1.1 设置自定义属性

通过设置dataset属性，我们可以轻松地在JS中定义HTML元素的自定义属性，方法如下：

// 查找元素
let el = document.querySelector('#myEl');
// 设置自定义属性
el.dataset.myAttr = 'myValue';

其中，#myEl 是HTML元素的 id 值，myAttr 和 myValue 是自定义属性和其对应的值。在这个例子中，我们通过 dataset 属性来设置了一个名为 myAttr 的自定义属性，它的值为 myValue。在HTML中，相应地，我们可以这样写：

<div id="myEl" data-my-attr="myValue">...</div>

1.2 获取自定义属性

通过dataset属性我们可以轻松地获取HTML元素的自定义属性的值，方法如下：

// 查找元素
let el = document.querySelector('#myEl');
// 获取自定义属性的值
let myAttrValue = el.dataset.myAttr;

其中，#myEl 是HTML元素的 id 值，myAttr 是我们需要获取的自定义属性名。在这个例子中，我们通过 dataset 属性来获取了一个名为 myAttr 的自定义属性的值。

2. 使用getAttribute和setAttribute方法

除了通过dataset属性来设置和获取自定义属性外，我们还可以使用getAttribute和setAttribute方法来实现。

2.1 设置自定义属性

使用setAttribute方法，我们同样可以在JS中为HTML元素定义一个自定义属性，方法如下：

// 查找元素
let el = document.querySelector('#myEl');
// 设置自定义属性
el.setAttribute('data-my-attr', 'myValue');

在这个例子中，我们同样通过 data-* 属性来定义一个名为 myAttr 的自定义属性，它的值为 myValue。在HTML中，相应地，我们可以这样写：

<div id="myEl" data-my-attr="myValue">...</div>

2.2 获取自定义属性

使用getAttribute方法，我们同样可以轻松地获取HTML元素的自定义属性的值，方法如下：

// 查找元素
let el = document.querySelector('#myEl');
// 获取自定义属性的值
let myAttrValue = el.getAttribute('data-my-attr');

在这个例子中，我们通过 getAttribute 方法来获取了一个名为 myAttr 的自定义属性的值。

以上就是关于JS设置和获取自定义属性的方法，希望对你有所帮助。