js增加html标签属性，html里h标签添加属性

使用setAttribute()方法添加属性

`setAttribute()`方法接受两个参数：要添加的属性名称和属性值。例如：

```javascript

const myDiv = document.querySelector('.my-div');

myDiv.setAttribute('class', 'my-div new-class');

```

这段代码将选择页面中第一个class为my-div的div元素，并将它的class属性设置为`my-div new-class`。如果原本该元素的class为`my-div`，则执行后的class为`my-div new-class`。

除了可以添加class属性之外，`setAttribute()`方法还可以用于添加其他内联属性，例如id、style等。

使用点（`.`）操作符添加属性

除了使用`setAttribute()`方法之外，我们还可以使用点（`.`）操作符来添加属性。点操作符可以直接通过对象的属性名来访问该属性。例如：

```javascript

const myDiv = document.querySelector('.my-div');

myDiv.id = 'my-id';

```

这段代码将选择页面中第一个class为my-div的div元素，并将它的id属性设置为`my-id`。与`setAttribute()`方法不同的是，使用点操作符添加的属性都是内联属性，无法添加嵌入属性。但是点操作符更加简洁明了，可以更直接地体现代码含义。

添加h标签的属性

HTML中的h标签（h1~h6）是标题标签，它们默认会有一定的样式和大小。如果需要修改h标签的样式或者添加新的属性，可以通过JavaScript来实现。

首先，需要选择要修改的h标签元素。我们可以使用`document.querySelector()`方法来选择要修改的h标签，例如：

```javascript

const myH1 = document.querySelector('h1');

```

选中h1标签之后，我们可以使用点操作符或者`setAttribute()`方法来添加或修改属性。例如：

```javascript

myH1.className = 'my-h1';

myH1.setAttribute('data-test', '123');

```

这段代码将为选中的h1元素添加一个`class`属性，并为它设置为`my-h1`，同时也添加了一个`data-test`属性，并将它的值设置为`123`。这样，在CSS样式表中就可以通过`.my-h1`来修改h1标签的样式了。

当然，如果想要添加更多属性、修改更多的样式，还可以使用JavaScript操作`style`属性，例如：

```javascript

myH1.style.color = 'red';

myH1.style.fontSize = '24px';

```

这段代码将修改h1元素的文本颜色为红色，字体大小为24像素。这种方式虽然更加灵活，但是需要注意的是，修改样式时需要使用JavaScript中的驼峰命名法，例如`fontSize`，而不是CSS中的中划线命名法，例如`font-size`。

总结