js设置css

在JavaScript中设置CSS样式可以通过DOM（文档对象模型）来实现。

DOM是用来操作HTML文档的API，可以通过JavaScript来创建、访问、修改和删除HTML元素和属性。

要设置CSS样式，需要先获取目标元素，然后通过修改元素的style属性来设置样式。

1. 获取元素：

可以使用document.getElementById()来通过元素的id获取元素，例如：

```

var element = document.getElementById("elementId");

```

也可以使用querySelector()方法或querySelectorAll()方法来获取元素。例如：

```

var element = document.querySelector("#elementId");

var elements = document.querySelectorAll(".className");

```

2. 设置样式：

获取到元素后，可以通过修改style属性来设置样式。style属性是一个CSSStyleDeclaration对象，它包含了对应元素的所有样式属性和对应的值。

- 直接赋值：

可以直接通过style属性来设置CSS样式，例如：

```

element.style.color = "red";

element.style.fontSize = "16px";

```

- 使用CSS属性名：

style对象的属性名是对应CSS属性的驼峰写法，例如：

```

element.style.backgroundColor = "yellow";

element.style.marginTop = "20px";

```

- 使用setAttribute()方法：

也可以使用setAttribute()方法来设置样式，需要将CSS属性名作为*个参数，样式值作为第二个参数，例如：

```

element.setAttribute("background-color"

"green");

element.setAttribute("font-size"

"18px");

```

需要注意的是，使用style属性设置的样式只会修改元素的内联样式，即写入到元素的style属性中。如果需要修改的样式不是内联样式，例如来自外部样式表或者行内样式表，建议使用classList对象操作元素的类名，或者将样式写入到样式表中。

总结：

以上就是通过JavaScript设置CSS样式的基本方法。通过获取到元素后，可以通过修改元素的style属性或使用setAttribute()方法来设置样式，实现动态修改页面的外观。