大家好，小编来为大家解答以下问题，怎么在js中给元素添加属性，js给元素添加自定义属性，现在让我们一起来看看吧！
element.style 行内样式操作
element.className 类名样式操作
1. element.style
- 上下文是获取到的元素；
- 通过element.style.某个css样式 设置某个css样式的值；
- js里采用驼峰命名法，比如设置字体大小，element.style.fontSize = “10px”；
- 采用element.style是给元素加了行内样式，css权重比较高；
- 一般是用在修改样式较少的情况下使用。
<body>
<div class="box">内容</div>
</body>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
<>
const box = document.querySelector(".box");
box.style.fontSize = "20px";
box.style.backgroundColor = "pink";
</>
从下面可以看到加到了行内样式中：
2. element.className
- 上下文是获取到的元素；
- 如果修改的样式较多，建议使用这个；
- 使用element.className = "类名"来给某个元素添加类名；
- 注意：className会直接更改元素的类名，会覆盖之前已有的类名，如果想要保留之前已有的类名(比如之前已有的类名是.first .second，新添加的类名是.third)可以这样写： element.className = “first second third”GPT改写。
<body>
<div class="box">内容</div>
</body>
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
}
// 在style先写好要添加的类名
.first {
margin-top: 50px;
padding: 50px;
font-size: 20px;
color: red;
}
</style>
<>
const box = document.querySelector(".box");
// 如果不保留之前的类名可以这样些 box.className = "first";
// 保留之前的类名
box.className = "box first";
</>
添加类名之后效果如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
