使用 JavaScript 更改 CSS
JavaScript 允许您动态更改 HTML 元素的 CSS。
当 HTML 在浏览器中加载时，它会创建一个 DOM 树。DOM 树包含对象格式的每个 HTML 元素。此外，每个 HTML 元素对象都包含 'style' 对象作为属性。在这里，'style' 对象包含各种属性，如 color、backgroundcolor 等，用于更改或获取元素的样式。
因此，你可以使用 'style' 对象的各种属性来更改特定 HTML 元素的样式。
语法
按照以下语法更改 HTML 元素的 CSS。
element.style.property = value;
在上面的语法中，'element' 是一个 HTML 元素，你需要从 DOM 树中访问它。'property' 是一个 CSS 属性，'value' 可以是 static 或 dynamic。
示例：更改 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"> Changing the color of this Div. </div> <br>
<button onclick="changeColor()"> Change Color </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"> Changing the style of this Div. </div> <br>
<button onclick = "changeStyle()"> Change color </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>
在事件触发时更改元素的样式
您还可以在触发特定事件时更改元素的样式。
例在下面的代码中，我们将 'click' 事件添加到 <div> 元素中。当用户单击该按钮时，它会更改 div 元素的背景颜色。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 700px;
height: 100px;
color: white;
background-color: orange;
}
</style>
</head>
<body>
<div id = "square"> Click Me </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"> Hover Me </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">Select any of the following colors to change the background color</p></div>
<div>Yellow: <input type = "radio" id = "yellow" name = "color"></div>
<div>Green: <input type = "radio" id = "green" name = "color"></div>
<div>Red: <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>
