JavaScript HTML DOM – 改变 CSS
天天向上
发布： 2025-02-27 23:45:20
原创
992
人浏览过
通过 JavaScript 操作 HTML DOM，我们不仅可以改变网页的内容，还可以动态地修改网页的样式（CSS）。这种方式可以让你在网页加载后根据用户的行为或者其他条件改变网页的外观。
1. 修改单个元素的样式
我们可以通过 JavaScript 来修改元素的行内样式，使用 style 属性来访问和更改元素的 CSS 样式。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change CSS with JavaScript</title>
</head>
<body>
<h1 id="heading">Change My Style!</h1>
<script>
// 获取元素
const heading = document.getElementById('heading');
// 修改 CSS 样式
heading.style.color = 'red'; // 改变字体颜色
heading.style.fontSize = '50px'; // 改变字体大小
heading.style.backgroundColor = 'yellow'; // 改变背景颜色
</script>
</body>
</html>2. 使用 setProperty() 方法修改 CSS 样式
setProperty() 方法可以让我们设置 CSS 属性，它支持通过 JavaScript 动态地修改元素的样式。它通常用于修改具有更复杂或动态设置的 CSS 样式。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>setProperty Method</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: blue;"></div>
<script>
// 获取元素
const box = document.getElementById('box');
// 使用 setProperty 修改 CSS 样式
box.style.setProperty('background-color', 'green'); // 修改背景颜色
box.style.setProperty('width', '200px'); // 修改宽度
box.style.setProperty('height', '200px'); // 修改高度
</script>
</body>
</html>3. 添加和删除类（class）
除了修改行内样式外，我们还可以通过修改元素的 class 属性来应用外部 CSS 样式。通过 classList API，可以添加、删除或切换类。
- add()：向元素添加一个或多个类。
- remove()：从元素移除一个或多个类。
- toggle()：如果类存在，则删除它；如果类不存在，则添加它。
- contains()：检查元素是否包含某个类。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Manipulation</title>
<style>
.highlight {
color: red;
font-size: 30px;
}
.big {
font-size: 50px;
}
</style>
</head>
<body>
<h1 id="heading">Hello, JavaScript!</h1>
<script>
// 获取元素
const heading = document.getElementById('heading');
// 添加类
heading.classList.add('highlight'); // 给标题添加 'highlight' 类
// 切换类
heading.classList.toggle('big'); // 切换 'big' 类
// 移除类
heading.classList.remove('highlight'); // 移除 'highlight' 类
</script>
</body>
</html>4. 修改多个元素的样式
如果我们要同时修改多个元素的样式，可以通过 querySelectorAll() 来选择多个元素，并使用 forEach 方法遍历这些元素。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Multiple Elements</title>
<style>
.box {
width: 100px;
height: 100px;
margin: 10px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script>
// 获取所有具有 'box' 类的元素
const boxes = document.querySelectorAll('.box');
// 遍历每个元素并修改样式
boxes.forEach(function(box) {
box.style.backgroundColor = 'green'; // 改变背景颜色
box.style.width = '150px'; // 改变宽度
box.style.height = '150px'; // 改变高度
});
</script>
</body>
</html>5. 动态地插入样式表（CSS）
我们还可以通过 JavaScript 动态地创建并插入样式表（CSS），使得网页样式更加动态和灵活。
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert CSS Dynamically</title>
</head>
<body>
<h1 id="heading">Dynamically Added Styles</h1>
<script>
// 创建一个 <style> 元素
const style = document.createElement('style');
style.innerHTML = `
#heading {
color: blue;
font-size: 50px;
}
`;
// 将 <style> 元素添加到 <head> 中
document.head.appendChild(style);
</script>
</body>
</html>总结
- 行内样式：通过 JavaScript 的
style属性修改单个元素的 CSS 样式。 - 修改类：使用
classListAPI，可以动态地添加、移除或切换 CSS 类，从而改变元素的外观。 - 批量修改：通过
querySelectorAll()和forEach()，可以修改多个元素的样式。 - 动态插入样式表：通过创建和插入
<style>元素，可以动态地应用新的 CSS 样式。
通过这些方法，JavaScript 为我们提供了极大的灵活性，可以在网页中动态地调整样式，从而实现交互式和响应式的设计。
更多详细文章请关注其他相关文章。