setAttribute，和，getAttribute，的用法

JavaScript 是一种强大而灵活的语言，可以通过其操作 HTML 页面中的元素来实现各种交互和动态效果。setAttribute 和 getAttribute 两个方法就是其中的两个重要方法，它们分别用于设置和获取元素的属性值。在本文中，我们将详细介绍这两个方法的用法，并提供多个实际应用示例，供读者参考。

1. setAttribute 方法的详细介绍

setAttribute 方法用于设置 HTML 元素的属性值。它的语法如下：

```javascript

element.setAttribute(name, value)

```

其中，element 为要设置属性的 HTML 元素对象；name 为要设置的属性名，字符串类型；value 为要设置的属性值，字符串类型。例如，我们可以通过以下代码设置一个元素的 id 属性：

```html

```

在这个例子中，我们通过 getElementById 方法获取一个 id 为 myDiv 的 div 元素对象，然后使用 setAttribute 方法修改其 id 属性为 newID。最后，我们通过访问 elem.id 属性输出最新的 id 值，可以看到它已经被修改为了 newID。

除了修改 id 属性外，我们还可以使用 setAttribute 方法修改元素的其他属性。例如，下面的代码演示了如何通过 setAttribute 方法设置一个图片的 src 属性，并将其添加到页面中：

```html

```

在这个例子中，我们首先通过 createElement 方法创建了一个 img 元素对象，然后使用 setAttribute 方法设置了其 src 属性为 https://picsum.photos/200。最后，我们使用 appendChild 方法将这个图片元素添加到页面中。

2. getAttribute 方法的详细介绍

getAttribute 方法用于获取 HTML 元素的属性值。它的语法如下：

```javascript

element.getAttribute(name)

```

其中，element 为要获取属性的 HTML 元素对象；name 为要获取的属性名，字符串类型。例如，我们可以通过以下代码获取一个元素的 class 属性值：

```html

```

在这个例子中，我们通过 querySelector 方法获取一个 class 为 myClass 的 div 元素对象，然后使用 getAttribute 方法获取其 class 属性值，并将其赋给一个变量 className。最后，我们通过访问这个变量输出 class 属性值。

除了获取 class 属性值外，我们还可以使用 getAttribute 方法获取元素的其他属性值。例如，下面的代码演示了如何通过 getAttribute 方法获取一个链接元素的 href 属性值：

```html

Google

```

在这个例子中，我们通过 getElementsByTagName 方法获取了所有的 a 元素对象，并从中选取第一个元素对象。然后，我们使用 getAttribute 方法获取其 href 属性值，并将其赋给一个变量 href。最后，我们通过访问这个变量输出 href 属性值。

3. 实际应用示例

setAttribute 和 getAttribute 方法可以被广泛应用于 Web 开发中，例如：

* 动态添加、修改元素的属性值。例如，当用户点击一个按钮时，可以通过 setAttribute 方法动态修改另一个元素的属性，从而实现一些交互效果。

* 获取表单元素的值。例如，当用户提交表单时，可以通过 getAttribute 方法获取表单元素的值，并将其发送到服务器端进行处理。

* 获取元素的样式属性值。例如，当需要获取某个元素的样式属性值时，可以通过 getAttribute 方法获取它的样式属性值，并在页面上进行相应的处理。

* 动态加载 JavaScript 代码。例如，在一些需要动态加载 JavaScript 代码的场景下，可以通过 setAttribute 方法设置 script 元素的 src 属性，并将其添加到页面中，从而实现动态加载 JS 代码的功能。

下面列举一些具体的应用示例：

3.1 动态添加样式

当需要动态添加样式时，我们可以使用 setAttribute 方法，给元素添加一个新的 class 属性值。例如，下面的代码演示了如何动态添加一个样式类，并改变元素的背景色：

```html

Change color

```

在这个例子中，我们首先定义了一个 .highlight 的 CSS 类，用于改变元素的背景色。然后，我们定义了一个包含按钮的 div 元素和一个 id 为 myDiv 的 div 元素。当用户点击按钮时，会触发 changeColor 函数，该函数会使用 setAttribute 方法修改 myDiv 元素的 class 属性值，添加 highlight 类。这样，当用户点击按钮后，myDiv 元素会立即变成黄色。

3.2 获取表单数据

当需要获取表单数据时，我们可以使用 getAttribute 方法，获取表单元素的值，从而进行后续处理。例如，下面的代码演示了如何在表单提交时统计选择了哪些复选框：

```html

```

在这个例子中，我们首先定义了一个包含多个复选框的表单，每个复选框都有一个 name 属性为 fruit。当用户点击提交按钮时，将触发 handleSubmit 函数，该函数会获取所有 name 为 fruit 的复选框元素对象，并遍历每个元素对象，判断其是否被选中。如果被选中，则使用 getAttribute 方法获取其 value 属性值，并将其添加到 selectedFruits 数组中。最后，我们通过 console.log 函数输出 selectedFruits 数组，展示用户选择了哪些水果。

3.3 获取元素样式属性

当需要获取元素的样式属性值时，我们可以使用 getAttribute 方法获取元素的 style 属性值，从而进行后续处理。例如，下面的代码演示了如何获取一个 div 元素的宽度和高度：

```html

Show Dimensions

```

在这个例子中，我们首先定义了一个 id 为 myDiv 的 div 元素，使用 style 属性设置其宽度为 200px，高度为 100px。当用户点击按钮时，将触发 showDimensions 函数，该函数会获取 id 为 myDiv 的元素对象，并使用 getAttribute 方法获取其 style 属性值。然后，我们使用正则表达式从 style 属性值中提取出宽度和高度值，最后通过 console.log 函数输出获取到的宽度和高度值。

3.4 动态加载 JavaScript 代码

当需要动态加载 JavaScript 代码时，我们可以使用 setAttribute 方法设置 script 标签的 src 属性，从而实现动态加载 JS 代码。例如，下面的代码演示了如何在相应按钮点击时动态加载一个第三方 JS 库：

```html

Load jQuery

```

在这个例子中，我们首先定义了一个包含按钮和一个 div 的 html 页面。当用户点击按钮时，将触发 loadJQuery 函数，该函数会创建一个 script 元素对象，并使用 setAttribute 方法设置其 src 属性为 jQuery 的 CDN 地址。然后，我们使用 appendChild 方法将这个 script 元素添加到页面中。当 script 元素加载完成后，页面中就可以使用 $ 符号代表 jQuery 对象了，我们可以使用它来操作 DOM。最后，我们使用 $("#output").html() 函数在 div 元素中输出一段文本，证明 jQuery 已经被成功加载到页面中了。

4. 结语

本文详细介绍了 JavaScript 中的 setAttribute 和 getAttribute 方法的用法，并提供了多个实际应用示例。这两个方法是 Web 前端开发中的重要方法，熟练掌握它们的使用，可以让开发者更快捷、更高效地实现各种交互和动态效果。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/