JS 控制 CSS 样式表的方式主要有两种:通过修改样式属性来修改元素样式,以及通过切换 CSS 类名来切换元素样式。下面分别给出具体的步骤和示例说明。
通过修改样式属性修改元素样式
- 获取需要修改样式的元素
可以通过document.getElementById
、document.getElementsByClassName
、document.getElementsByTagName
等 API 来获取。
var ele = document.getElementById("myDiv");
- 修改元素的样式属性
通过修改元素的 style 属性来修改样式,例如修改背景颜色为红色:
ele.style.backgroundColor = "red";
示例1:将背景颜色切换为红色和白色
<div id="myDiv"></div>
<button onclick="changeColor()">切换颜色</button>
<script>
function changeColor() {
var ele = document.getElementById("myDiv");
if (ele.style.backgroundColor === "red") {
ele.style.backgroundColor = "white";
} else {
ele.style.backgroundColor = "red";
}
}
</script>
示例2:通过输入框修改字体大小
<div id="myDiv">Hello world</div>
<input type="number" id="fontSize" placeholder="请输入字体大小">
<button onclick="changeFontSize()">修改字体大小</button>
<script>
function changeFontSize() {
var ele = document.getElementById("myDiv");
var fontSizeInput = document.getElementById("fontSize");
var fontSize = fontSizeInput.value + "px";
ele.style.fontSize = fontSize;
}
</script>
通过切换 CSS 类名切换元素样式
-
获取需要修改样式的元素
同样可以通过document.getElementById
、document.getElementsByClassName
、document.getElementsByTagName
等 API 来获取。 -
定义 CSS 类名及样式
定义一个 CSS 类名,并在样式表中为该类名定义一组样式,例如:
.my-class {
background-color: red;
}
- 切换元素的 CSS 类名
通过修改元素的className
属性来切换类名,例如:
ele.className = "my-class";
示例1:点击按钮切换元素背景颜色
<style>
.red-bg {
background-color: red;
}
.white-bg {
background-color: white;
}
</style>
<div id="myDiv"></div>
<button onclick="toggleBgColor()">切换背景颜色</button>
<script>
function toggleBgColor() {
var ele = document.getElementById("myDiv");
if (ele.className === "red-bg") {
ele.className = "white-bg";
} else {
ele.className = "red-bg";
}
}
</script>
示例2:点击按钮切换元素的样式
<style>
.my-style {
font-size: 24px;
color: red;
}
</style>
<div id="myDiv"></div>
<button onclick="toggleStyle()">切换样式</button>
<script>
function toggleStyle() {
var ele = document.getElementById("myDiv");
if (ele.className === "my-style") {
ele.className = "";
} else {
ele.className = "my-style";
}
}
</script>
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS 控制CSS样式表 - Python技术站