setAttribute，和，getAttribute，的用法

在JavaScript中，setAttribute()和getAttribute()是两个重要的方法，它们的用途分别是向HTML元素中添加属性和获取元素的属性值。通俗地说，setAttribute()是设置属性，而getAttribute()是获取属性。

一、setAttribute()

setAttribute()是为HTML元素添加属性的方法。它接受两个参数——属性名和属性值。例如：

```

var element = document.getElementById("myDiv");

element.setAttribute("data-name", "John");

```

其中，参数一是要添加属性的元素的ID，参数二的"data-name"表示属性名，"John"表示属性值。

setAttribute()方法的另一个作用是可以在不知道该元素是否已经存在该属性时添加属性。例如：

```

var element = document.getElementById("myDiv");

element.setAttribute("data-age", "18");

```

即使元素已经存在"data-age"属性，setAttribute()也会更新其属性值。如果属性不存在，则会创建新属性并添加属性值。

除了用于添加元素属性，setAttribute()还可以用于添加样式属性，如下所示：

```

var element = document.getElementById("myDiv");

element.setAttribute("style", "background-color:red; font-size:16px;");

```

在这个例子中，我们使用setAttribute()方法设置元素的样式，background-color和font-size参数分别代表元素的背景颜色和字体大小。

在开发中，我们有时需要向元素添加自定义属性。如：

```

var element = document.getElementById("myDiv");

element.setAttribute("data-custom", "custom-value");

```

在这个例子中，我们为元素添加了一个名为"data-custom"的自定义属性，并将其属性值设置为"custom-value"。

二、getAttribute()

getAttribute()方法是获取HTML元素属性值的方法。它接受一个参数——属性名。例如：

```

var element = document.getElementById("myDiv");

var name = element.getAttribute("data-name");

```

在这个例子中，我们使用getAttribute()方法获取元素的"data-name"属性值。将其赋值给变量"name"。若"data-name"属性不存在，则返回null。

getAttribute()方法还可以用于获取元素的样式属性值。例如：

```

var element = document.getElementById("myDiv");

var color = element.getAttribute("style");

```

这段代码会返回元素的样式字符串，包括样式属性和对应的属性值。

好了，上述就是setAttribute()和getAttribute()方法的使用方法。两者可以结合使用，实现对HTML元素和样式的动态控制，为JavaScript开发增加灵活性和可维护性。