编辑这个页面须要登录或更高权限！

JS DOM 改变CSS

HTML DOM允许JavaScript获取和更改HTML元素的样式（CSS）。

更改元素样式

您可以使用style属性将样式应用于特定的HTML元素。

要更改HTML元素的样式，请使用以下语法：

element.style.property = value

下面的示例更改<h1>元素的样式：

<!DOCTYPE html>
<html>

<h1 id="demo">HTML DOM style Property</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>

</html>
测试看看‹/›

当用户单击按钮时，此示例更改<h1>元素的样式：

<h1 id="demo">HTML DOM style Property</h1>
<button onclick="myFunc()">Click</button>

<script>
function myFunc() {
   document.getElementById("demo").style.color = "blue";
}
</script>
测试看看‹/›

当用户单击按钮时，此示例还更改了<h1>元素的样式：

<h1 id="demo">HTML DOM style Property</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">Click</button>
测试看看‹/›

从元素获取样式信息

同样，您可以使用style属性将样式应用于HTML元素。

以下示例将从具有id="demo"的元素获取样式信息（border-top）：

var x = document.getElementById("demo").style.borderTop;
测试看看‹/›

注意：当从元素中获取style样式信息时，该属性不是很有用，因为该属性仅返回元素的style属性中设置的样式规则，而不返回来自其他位置的样式规则，例如嵌入式样式表中的样式规则，或外部样式表。

要获取实际上用于呈现元素的所有CSS属性的值，可以使用以下window.getComputedStyle()方法：

let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);

para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');
测试看看‹/›

将CSS类添加到元素

您也可以使用className属性将CSS类获取或设置为HTML元素。

document.getElementById("x").className = "para";
测试看看‹/›

您还可以使用该classList属性轻松地从元素获取，设置或删除CSS类。

下面的示例向<p>元素添加一个para类：

var elem = document.getElementById("x");
elem.classList.add("para");
测试看看‹/›

将多个类添加到<p>元素：

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");
测试看看‹/›

从<p>元素中删除一个类：

var elem = document.getElementById("x");
elem.classList.remove("para");
测试看看‹/›

在两个类之间切换<p>元素：

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");
测试看看‹/›

切换一个类（“打开”）以创建侧面导航按钮：

运行代码
JS DOM 改变元素属性JS DOM 改变HTML内容

JavaScript菜鸟教程
JavaScript 对象
JavaScript 函数
JS HTML DOM
JS 浏览器BOM
AJAX 菜鸟教程
JavaScript 参考手册