修改元素的样式属性：
<!DOCTYPE html>
<html>
<head>
<title>Change CSS</title>
<style>
#myElement {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p id="myElement">This is a paragraph.</p>
<script>
// 获取元素
var element = document.getElementById("myElement");
// 修改样式属性
element.style.color = "red";
element.style.fontSize = "20px";
</script>
</body>
</html>
在这个例子中，JavaScript 使用 getElementById 获取了 ID 为 "myElement" 的元素，然后通过 style 属性访问元素的样式，并修改了颜色和字体大小。
添加或移除 CSS 类：
<!DOCTYPE html>
<html>
<head>
<title>Change CSS</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
// 获取元素
var paragraph = document.getElementById("myParagraph");
// 添加 CSS 类
paragraph.classList.add("highlight");
// 移除 CSS 类
// paragraph.classList.remove("highlight");
</script>
</body>
</html>
在这个例子中，JavaScript 使用 getElementById 获取了 ID 为 "myParagraph" 的元素，然后通过 classList 属性添加或移除了名为 "highlight" 的 CSS 类。
切换 CSS 类：
<!DOCTYPE html>
<html>
<head>
<title>Change CSS</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<p id="myParagraph">This is a paragraph.</p>
<script>
// 获取元素
var paragraph = document.getElementById("myParagraph");
// 切换 CSS 类
paragraph.classList.toggle("highlight");
</script>
</body>
</html>
在这个例子中，JavaScript 使用 getElementById 获取了 ID 为 "myParagraph" 的元素，然后通过 classList 属性切换了名为 "highlight" 的 CSS 类。如果元素没有该类，则添加；如果已经有该类，则移除。
这些示例展示了如何使用 JavaScript 和 HTML DOM 来改变页面元素的 CSS 样式。根据需要，你可以使用不同的 DOM 方法和属性来实现更多复杂的样式变化。
转载请注明出处：http://www.pingtaimeng.com/article/detail/3548/JavaScript