当涉及到操作CSS时,以下是一个完整的示例,演示如何使用JavaScript来动态修改元素的样式属性:
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myElement">Hello, World!</div>
<button onclick="changeStyle()">Change Style</button>
<script src="script.js"></script>
</body>
</html>
JavaScript(script.js):
function changeStyle() {
// 获取元素节点
const myElement = document.getElementById('myElement');
// 修改元素的样式属性
myElement.style.color = 'red';
myElement.style.fontSize = '20px';
myElement.style.backgroundColor = 'blue';
// 添加CSS类
myElement.classList.add('highlight');
}
在上面的示例中,当点击按钮时,changeStyle()
函数会被调用。在该函数中,使用getElementById()
方法获取myElement
元素节点,并使用style
属性来修改其样式属性。同时,使用classList.add()
方法添加了highlight
CSS类,将元素的背景颜色修改为黄色。
请注意,为了使JavaScript代码生效,将JavaScript代码保存为单独的文件(例如script.js
)并通过<script>
标签引入到HTML文件中。
当点击按钮时,changeStyle()
函数会根据代码中的样式属性修改元素的样式。这样,元素的颜色、字体大小和背景颜色都会改变,并且添加了highlight
CSS类以应用特定的样式规则。
通过这个完整的例子,你可以了解如何使用JavaScript来操作CSS,动态地修改元素的样式属性,以及如何添加和使用CSS类。