概述
JavaScript 允许你动态地更改 HTML 元素的 CSS。
当 HTML 在浏览器中加载时，它会创建一个 DOM 树。DOM 树包含每一个 HTML 元素的对象格式。进一步来说，每一个 HTML 元素对象都包含一个名为 'style' 的对象作为属性。这里，'style' 对象包含了如颜色、背景颜色等属性，可以用来更改或获取元素的样式。
因此，你可以使用 'style' 对象的各种属性来更改特定 HTML 元素的样式。
语法
遵循以下语法来更改 HTML 元素的 CSS。
element.style.property = value;
在上面的语法中，'element' 是你需要从 DOM 树中访问的 HTML 元素。'property' 是一个 CSS 属性，而 'value' 可以是静态的或动态的。
示例：更改 HTML 元素的样式
我们在下面的代码中对 div 元素应用了初始样式。在 JavaScript 中，我们使用 style 对象的 backgroundColor 属性来更改 div 元素的背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: blue;
width: 700px;
height: 100px;
color: white;
}
</style>
</head>
<body>
<div id="square"> 改变这个 Div 的颜色。</div> <br>
<button onclick="changeColor()"> 改变颜色 </button>
<script>
function changeColor() {
let square = document.getElementById('square');
square.style.backgroundColor = 'red';
}
</script>
</body>
</html>
示例：向单个 HTML 元素添加多个样式
在下面的代码中，我们在 changeStyle() 函数中更改了 <div> 元素的多个 CSS 属性。
我们使用了 backgroundColor、color、fontSize 和 width 属性来更改 CSS。
<!DOCTYPE html>
<html>
<body>
<div id="square"> 改变这个 Div 的样式。</div> <br>
<button onclick="changeStyle()"> 改变颜色 </button>
<script>
function changeStyle() {
document.getElementById('square').style.backgroundColor = 'red';
document.getElementById('square').style.color = "white";
document.getElementById('square').style.fontSize = "25px";
document.getElementById('square').style.width = "700px";
}
</script>
</body>
</html>
当事件触发时更改元素的样式
你也可以在某个特定事件触发时更改元素的样式。
示例
在下面的代码中，我们在 <div> 元素上添加了 click 事件。当用户点击按钮时，它会更改 div 元素的背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 700px;
height: 100px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<div id="square"> 点击我 </div> <br>
<script>
const square = document.getElementById('square');
square.addEventListener('click', () => {
square.style.backgroundColor = 'green';
square.style.fontSize = "25px";
});
</script>
</body>
</html>
示例
在下面的代码中，我们在 div 元素上添加了 hover 事件。当鼠标光标进入和离开 div 元素时，它会更改 div 元素的样式。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 700px;
height: 100px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<div id="square"> 悬停我 </div> <br>
<script>
const square = document.getElementById('square');
square.addEventListener('mouseenter', () => {
square.style.backgroundColor = 'green';
square.style.fontSize = "25px";
});
square.addEventListener('mouseleave', () => {
square.style.backgroundColor = 'orange';
square.style.fontSize = "initial";
});
</script>
</body>
</html>
动态更改 HTML 元素的 CSS
你也可以动态地更改 HTML 元素的 CSS。你可以使用变量来赋值。
示例
我们在下面的代码中向 <div> 元素添加了默认样式。
同时，我们也创建了多个单选按钮。当用户选择任何单选按钮时，它会相应地更改 div 元素的样式。
<!DOCTYPE html>
<html>
<head>
<style>
p {
width: 700px;
height: 100px;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div><p id="square">选择以下颜色之一以更改背景颜色</p></div>
<div>黄色: <input type="radio" id="yellow" name="color"></div>
<div>绿色: <input type="radio" id="green" name="color"></div>
<div>红色: <input type="radio" id="red" name="color"></div>
<script>
let square = document.getElementById('square');
let colors = document.getElementsByName('color');
for (let i = 0; i < colors.length; i++) {
colors[i].addEventListener('change', function () {
square.style.backgroundColor = this.id;
});
}
</script>
</body>
</html>