setAttribute，和，getAttribute，的用法

在前端开发中，我们经常需要对 HTML 元素进行属性的设置和获取。在 JavaScript 中，可以使用 `setAttribute()` 和 `getAttribute()` 方法来完成这个任务。这两个方法分别用于设置和获取 HTML 元素的属性，下面我们来详细介绍一下这两个方法的用法。

## setAttribute()

**setAttribute()** 方法用于设置 HTML 元素的属性。该方法有两个参数，第一个参数是要设置的属性的名称，第二个参数是要设置的属性的值。下面是该方法的语法：

```js

element.setAttribute(name, value);

```

其中，`element` 表示要设置属性的 HTML 元素，`name` 表示要设置的属性名称，`value` 表示要设置的属性值。

例如，在下面的代码中，我们使用 `setAttribute()` 方法来设置一个按钮元素的样式和文本：

```html

点击我

```

```js

var btn = document.getElementById("myBtn");

btn.setAttribute("style", "background-color: red; color: white;");

btn.setAttribute("title", "这是一个按钮");

```

在上面的例子中，我们首先获取了 ID 为 “myBtn” 的按钮元素，然后使用 `setAttribute()` 方法来设置该按钮的样式和 title 属性。

## getAttribute()

**getAttribute()** 方法用于获取 HTML 元素的属性值。该方法有一个参数，即要获取的属性名称。下面是该方法的语法：

```js

var attributeValue = element.getAttribute(name);

```

其中，`element` 表示要获取属性值的 HTML 元素，`name` 表示要获取的属性名称。执行该方法后，会返回属性的值。如果该元素没有该属性，则返回 `null`。

例如，在下面的代码中，我们使用 `getAttribute()` 方法来获取一个按钮元素的文本和样式：

```html

点击我

```

```js

var btn = document.getElementById("myBtn");

var btnText = btn.innerText;

var btnColor = btn.getAttribute("style");

```

在上面的例子中，我们首先获取了 ID 为 “myBtn” 的按钮元素，然后使用 `getAttribute()` 方法来获取该按钮的样式和文本。注意，虽然文本不是一个属性，但是我们可以通过 `innerText` 属性来获取。

## 使用示例

下面我们来看一个使用示例，该示例演示了如何使用 `setAttribute()` 和 `getAttribute()` 方法设置和获取按钮元素的属性：

```html

点击我

```

在上面的代码中，我们首先创建了一个按钮元素，然后使用 `setAttribute()` 方法来设置该按钮的样式和 title 属性。接着，使用 `getAttribute()` 方法来获取该按钮的文本和样式。最后，我们将获取的属性值输出到控制台中。

执行该代码后，可以看到如下输出结果：

```

按钮文本内容为：点击我

按钮样式属性值为：background-color: red; color: white;

```

## 总结

`setAttribute()` 和 `getAttribute()` 方法是用于设置和获取 HTML 元素属性的常用方法。他们可以帮助我们轻松地实现前端页面的功能需求。需要注意的是，尽量避免在 HTML 元素中使用行内样式，而是通过 CSS 样式表来设置样式。同时，在获取属性值时，如果该元素没有该属性，则返回 `null`。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/