CSS(层叠样式表)是我们在网页设计中经常用到的一种技术,它可以改变网页的外观和布局,并且可以使网页更加美观和易于阅读。在这篇文章中,我们将探讨如何用JavaScript来改变CSS的样式。
首先,在HTML中定义一个样式表。下面是一个简单的例子:
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<div id="box">Hello World!</div>
<button id="redBtn">变成红色</button>
<button id="blueBtn">变成蓝色</button>
登录后复制
这个例子中,我们定义了两个CSS样式类“red”和“blue”,分别设定了文字颜色为红色和蓝色。
然后,在JavaScript中,我们可以用document.querySelector()方法来获取DOM元素,用.style属性来改变CSS样式。下面是一个例子:
const box = document.querySelector('#box');
const redBtn = document.querySelector('#redBtn');
const blueBtn = document.querySelector('#blueBtn');
redBtn.onclick = () => {
box.style.color = 'red';
};
blueBtn.onclick = () => {
box.style.color = 'blue';
};
登录后复制
这个例子中,我们创建了三个变量,分别对应HTML中的
元素和两个
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
-
2024-10-13 11:44:01
-
2024-10-13 09:56:31
-
2024-10-11 20:58:41
-
2024-10-11 16:53:11
-
2024-10-11 11:54:51
-
2024-10-10 16:21:01
-
2024-10-10 15:18:02
-
2024-10-10 13:34:01
-
2024-10-10 13:26:26
-
2024-10-10 11:38:42