setAttribute，和，getAttribute，的用法

setAttribute和getAttribute是JS中用于操作元素属性的两个方法。

1. setAttribute方法：

- 语法：element.setAttribute(name, value);

- 参数：

- name：要设置的属性的名称。

- value：要设置的属性的值。

- 功能：设置指定元素的属性值。

- 示例：

```

```

上述代码会为id为"myDiv"的div元素设置一个class属性，值为"box"。

2. getAttribute方法：

- 语法：element.getAttribute(name);

- 参数：name：要获取的属性的名称。

- 功能：获取指定元素的属性值。

- 返回值：指定属性的值，若属性不存在则返回null。

- 示例：

```

```

上述代码会获取id为"myDiv"的div元素的class属性值，并将其输出。

setAttribute和getAttribute方法的使用非常灵活，可以用于操作任何元素的任何属性。下面通过几个具体的案例进一步说明它们的用法。

案例1：动态添加class属性

```

```

上述代码会为id为"myDiv"的div元素设置一个class属性，值为"box"。

案例2：获取自定义属性值

```

```

上述代码会获取id为"myDiv"的div元素的data-name和data-age属性值，并将其输出。

案例3：动态创建a标签并设置href属性

```

Click Here

```

上述代码会在id为"myLink"的a标签中动态创建一个a标签，并设置其href属性为"https://www.example.com"，文本内容为"Example"。

案例4：动态修改img标签的src属性

```

Change Image

```

上述代码中包含一个img标签和一个按钮，点击按钮会调用changeImage函数，将img标签的src属性修改为"newimage.jpg"，从而更换显示的图片。

总结：setAttribute和getAttribute是非常实用的属性操作方法，可以用于动态设置或获取元素的属性值。通过这两个方法，我们可以方便地对页面元素进行修改和操作。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/