setAttribute和getAttribute是JavaScript中两个常用的方法，用于操作HTML元素的属性。

1. setAttribute方法：

setAttribute是一个用于将指定的属性设置为指定的值的方法。它接受两个参数：属性名称和属性值。例如：

```javascript

// 获取一个元素，并将其id属性设置为"myElement"

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

element.setAttribute("id", "newElementId");

```

setAttriubte方法可以用于设置任何HTML属性，包括class、style、src等。如果指定的属性不存在，该方法会创建一个新的属性并赋予指定的值。

```javascript

// 设置元素的class属性为"active"

element.setAttribute("class", "active");

// 创建一个新的src属性，并赋予指定的值

element.setAttribute("src", "https://example.com/image.jpg");

```

2. getAttribute方法：

getAttribute方法用于获取指定属性的值。它接受一个参数，即属性名称。例如：

```javascript

// 获取元素的id属性值

var elementId = element.getAttribute("id");

```

如果指定的属性不存在，则getAttribute方法返回null。

```javascript

// 获取元素的src属性值

var src = element.getAttribute("src");

if (src === null) {

// 属性不存在

}

```

getAttribute方法也可以用于获取其他HTML属性的值，例如class、style等。

```javascript

// 获取元素的class属性值

var classValue = element.getAttribute("class");

// 获取元素的style属性值

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

```

使用setAttribute和getAttribute方法可以方便地操作HTML元素的属性。它们可以用于动态修改元素的属性，或者获取元素的属性值并进行相应的处理。

案例例子：

```html

Hello World!

Change Color

```

在上述例子中，当点击按钮时，会通过setAttribute方法将h1元素的style属性设置为红色。然后通过getAttribute方法获取h1元素的style属性值，并将其打印到控制台上。这样我们就可以验证属性的设置和获取是否成功。

总结：

setAttribute和getAttribute是JavaScript中操作HTML元素属性的两个重要方法。通过setAttribute方法，可以设置指定属性的值，如果属性不存在，会创建一个新的属性。通过getAttribute方法，可以获取指定属性的值，如果属性不存在，返回null。它们可以用于动态修改元素的属性，或者获取元素的属性值并进行相应的处理。这两个方法在前端开发中非常常用。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/