JavaScript - 更改 CSS

使用 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>

打印本页