改变 HTML 样式：使用 JavaScript 动态更新 CSS
JavaScript 不仅可以用来操作 DOM 元素，还可以用来动态地改变 HTML 元素的样式。这使得网页能够根据用户交互或其他逻辑条件实时地更新其外观。以下是一些使用 JavaScript 改变 HTML 样式的方法和示例。
1. 直接修改元素的 style 属性
这是最直接的方法，通过元素的 style 属性可以改变其内联样式。
var element = document.getElementById('myElement');
element.style.color = 'blue'; // 改变文本颜色
element.style.backgroundColor = 'yellow'; // 改变背景颜色
element.style.fontSize = '20px'; // 改变字体大小
2. 更改元素的类
通过改变元素的 className 属性，可以快速地应用一组预定义的样式。
var element = document.getElementById('myElement');
element.className = 'new-class'; // 替换所有类
element.classList.add('additional-class'); // 添加类
element.classList.remove('existing-class'); // 删除类
element.classList.toggle('toggleClass'); // 切换类
3. 使用 CSSStyleSheet 动态添加或修改样式
如果需要添加或修改 CSS 规则，可以使用 CSSStyleSheet 对象。
var styleSheet = document.styleSheets[0];
// 添加新的 CSS 规则
styleSheet.insertRule('#myElement { color: red; }', styleSheet.cssRules.length);
// 修改现有的 CSS 规则
for (var i = 0; i < styleSheet.cssRules.length; i++) {
if (styleSheet.cssRules[i].selectorText === '#myElement') {
styleSheet.cssRules[i].style.color = 'green';
break;
}
}
4. 响应事件改变样式
可以在事件处理函数中改变样式，以响应用户的交互。
var element = document.getElementById('myElement');
element.addEventListener('mouseover', function() {
this.style.transform = 'scale(1.1)'; // 鼠标悬浮时放大
});
element.addEventListener('mouseout', function() {
this.style.transform = 'scale(1)'; // 鼠标离开时恢复原大小
});
5. 代码示例
假设我们有一个简单的 HTML 页面，包含一个按钮和一个段落。我们希望点击按钮时改变段落的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Change Style Example</title>
<style>
.highlight {
background-color: #ffff99;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<button id="changeStyleBtn">Change Style</button>
<p id="myParagraph">This is a paragraph.</p>
<script>
var changeStyleBtn = document.getElementById('changeStyleBtn');
var myParagraph = document.getElementById('myParagraph');
changeStyleBtn.addEventListener('click', function() {
// 添加类来改变样式
myParagraph.classList.add('highlight');
// 也可以直接修改样式
// myParagraph.style.color = 'red';
});
</script>
</body>
</html>
在这个示例中，点击按钮会将段落的样式更改为具有黄色背景、灰色边框和内边距的样式类 highlight。
