设置元素样式
时间: 2023-11-12 21:03:41 浏览: 39
你可以通过 JavaScript 来设置元素的样式,有以下几种方式:
1. 直接设置元素的 style 属性,该属性接受一个字符串,其中包含一条或多条 CSS 样式规则,每条规则之间用分号隔开,具体如下:
```js
const element = document.querySelector('.my-element');
element.style.backgroundColor = 'red';
element.style.color = 'white';
```
2. 使用 classList 属性来添加或移除一个或多个类名,从而改变元素的样式,具体如下:
```js
const element = document.querySelector('.my-element');
element.classList.add('active');
element.classList.remove('inactive');
```
3. 通过设置元素的 className 属性来改变元素的类名,从而改变元素的样式,具体如下:
```js
const element = document.querySelector('.my-element');
element.className = 'new-class';
```
这种方式会覆盖元素原来的所有类名,如果只想添加一个类名,可以使用以下方式:
```js
const element = document.querySelector('.my-element');
element.className += ' new-class';
```
这样就会在原有的类名后面添加一个新的类名。
以上是常用的几种设置元素样式的方式,你可以根据具体情况选择使用哪种方式。