【2024】前端学习笔记13-JavaScript修改网页样式
学习笔记
- 1.修改网页样式
-
- 1.1.修改内联样式（`style`属性）
- 1.2.使用`cssText`属性：
- 2.修改样式类（`classList`属性）
-
- 2.1.添加和移除类名
- 2.2.切换类名（`toggle`方法）
1.修改网页样式
1.1.修改内联样式（style属性）
直接修改元素的style属性：
可以通过获取元素对象，然后直接修改其style属性中的样式规则。
缺点：如果需要修改多个样式，代码可能会变得冗长。
示例：要修改一个div元素的背景颜色和字体大小：
<body>
<div id="mydiv01">这是一个DIV元素</div>
<script>
// 获取元素
var divElement = document.getElementById("mydiv01");
// 修改背景颜色为绿色，字体颜色为红色，字体大小为30px
divElement.style.backgroundColor = "green";
divElement.style.color = "red";
divElement.style.fontSize = "30px";
</script>
</body>
使用 document.getElementById 方法来获取页面中 id 为"mydiv01"的元素，并将其赋值给变量 divElement。
使用divElement.style的方式修改元素中的属性。
展示效果：
1.2.使用cssText属性：
cssText属性允许你一次性设置多个样式规则。
例如：