DOM 更改 CSS
使用 JavaScript 更改 HTML 元素的样式也是常见的操作,HTML DOM 提供了更改 HTML 元素的样式的方法。
使用 JavaScript 更改 HTML 元素的样式也是常见的操作,HTML DOM 提供了更改 HTML 元素的样式的方法。
更改元素样式
要更改 HTML 元素的样式,请使用以下语法:
element.style.property = propertyValue;
以下示例更改 <p>
元素的文字颜色为蓝色:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
更改元素的类
有时候,使用上面的方法更改元素的样式太过于繁琐,我们可以直接更改元素 class
属性来应用对应的 css 类样式。
设置元素 class 的语法如下:
element.className = className;
由于 class
是 JavaScript 保留字,这里使用 className
属性设置元素的 css 类。
下面的例子为 p
元素添加两个 css 类:
<html>
<head>
<style>
.blue {
color: blue;
}
.large {
font-size: 48px;
}
</style>
</head>
<body>
<p id="p2">Hello World!</p>
<button onclick="document.getElementById('p2').className='blue large'">更改样式</button>
<button onclick="document.getElementById('p2').className=''">还原样式</button>
</body>
</html>