DOM---操作元素样式属性详解
文章目录
- 一、通过 style 属性操作 CSS
- 1. 直接使用 style 属性设置样式
- 2. 常见问题：使用驼峰命名
- 3. 操作多个样式
- 二、通过 className 操作类名控制 CSS
- 1. 什么是 className 属性？
- 2. className 的优势
- 3. 替换类名的注意事项
- 三、通过 classList 操作类控制 CSS
- 1. 什么是 classList？
- 2. 常用方法
- 3. 示例：添加和移除类名
- 4. toggle 方法的使用
- 5. contains 方法的使用
- 四、实际应用场景
- 1. 动态切换主题
- 2. 表单验证样式
- 五、总结
DOM（Document Object Model）是 Web 开发中的核心技术，它使开发者能够通过 JavaScript 动态操控 HTML 文档结构和样式。在实际开发中，操作元素的样式是非常常见的需求。本文将详细介绍如何通过
style属性、className属性和classList方法来操作 DOM 元素的 CSS 样式，帮助开发者灵活控制页面的外观。
一、通过 style 属性操作 CSS
1. 直接使用 style 属性设置样式
style 属性是 DOM 中最简单直接的方式，用于动态修改元素的内联样式。内联样式的优点是它能在不影响其他样式的情况下，直接应用于指定的元素。通过 JavaScript 可以轻松访问并修改元素的 style 属性。
例如，假设我们有如下的 HTML 元素：
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
通过 JavaScript 修改该元素的样式，可以这样实现：
const box = document.getElementById('box');
box.style.backgroundColor = 'blue';
box.style.width = '200px';
执行这段代码后，div 的背景颜色会从红色变成蓝色，宽度从 100px 增加到 200px。
2. 常见问题：使用驼峰命名
在 JavaScript 中，CSS 属性名通常需要使用驼峰式命名。比如，background-color 在 JavaScript 中需要写成 backgroundColor，而 font-size 则要写成 fontSize。这是因为 style 属性遵循 JavaScript 的命名规则。
3. 操作多个样式
通过 style 属性，我们可以对单个样式进行操作，但如果需要批量修改多个样式，直接使用 style 进行设置可能会显得冗余。对于这种情况，使用 className 或 classList 来批量管理样式会更加高效。
box.style.cssText = 'width: 300px; height: 300px; background-color: green;';
在上面的代码中，通过 cssText 可以一次性设置多个 CSS 样式。
二、通过 className 操作类名控制 CSS
1. 什么是 className 属性？
className 属性用于获取或设置元素的 class 属性值。使用 className 操作可以更为简便地控制元素的样式，因为我们可以通过设置类名来切换元素的外观，而不需要逐个修改内联样式。
<div id="box" class="red-box"></div>
假设我们已经在 CSS 文件中定义了以下两个类：
.red-box {width: 100px;height: 100px;background-color: red;
}
.blue-box {
width: 100px;
height: 100px;
background-color: blue;
}
通过 JavaScript，我们可以轻松切换元素的类，从而改变它的样式：
const box = document.getElementById('box');
box.className = 'blue-box';
此时，box 的背景颜色会变成蓝色。
2. className 的优势
使用 className 的一个主要优势是你可以预先在 CSS 文件中定义好复杂的样式规则，然后通过简单地修改类名来应用这些样式。相比直接使用 style 属性逐条设置样式，className 更加灵活且便于维护。
3. 替换类名的注意事项
使用 className 时需要注意的是，它会直接替换掉元素原有的类名。如果元素原本有多个类名，在赋值时可能会导致其他类被覆盖。
例如，如果元素原本有两个类 box red-box，我们直接赋值：
box.className = 'blue-box';
那么 red-box 会被移除，box 的类名变成了 blue-box，从而导致 red-box 相关的样式失效。为了解决这个问题，可以使用 classList。
三、通过 classList 操作类控制 CSS
1. 什么是 classList？
classList 是 DOM 元素提供的一个用于操作类名的接口，它允许你通过添加、移除、切换等方法灵活管理元素的类名。与 className 不同，classList 可以更加精细地操作类，而不会覆盖其他已有的类。
2. 常用方法
classList 提供了几个常用的操作方法：
add(className)：为元素添加指定的类名。remove(className)：移除元素的指定类名。toggle(className)：如果元素有指定的类名，则移除它；如果没有，则添加它。contains(className)：检查元素是否包含指定的类名。
3. 示例：添加和移除类名
<div id="box" class="box red-box"></div>
我们可以通过 classList 动态操作类名，例如：
const box = document.getElementById('box');
// 添加类名
box.classList.add(‘blue-box’);
// 移除类名
box.classList.remove(‘red-box’);
上述操作中，box 元素会移除 red-box 类，同时添加 blue-box 类。相比 className，这种方式不会覆盖掉元素已有的其他类名。
4. toggle 方法的使用
toggle 是一个非常有用的方法，尤其适用于需要根据条件动态切换类名的场景。toggle 可以简化很多条件判断的逻辑，比如实现元素的显示与隐藏：
const box = document.getElementById('box');
box.classList.toggle('hidden'); // 如果类名 'hidden' 存在则移除，否则添加
这种方式可以避免编写复杂的 if 判断逻辑，极大简化代码的可读性。
5. contains 方法的使用
contains 方法用于检查元素是否具有某个类名，常用于需要对元素的状态进行判断时：
if (box.classList.contains('blue-box')) {console.log('The box is blue');
} else {console.log('The box is not blue');
}
这种方法可以帮助我们方便地检查元素的样式状态，并作出相应的逻辑处理。
四、实际应用场景
1. 动态切换主题
在实际项目中，classList 可以用来实现一些高级功能，比如动态切换网站的主题。我们可以通过添加或移除特定的类名来改变页面的整体外观，而不需要重新加载页面。
const themeButton = document.getElementById('theme-button');
themeButton.addEventListener('click', () => {document.body.classList.toggle('dark-theme');
});
当点击按钮时，页面会在 dark-theme 和普通主题之间切换。dark-theme 类可以在 CSS 中预先定义好，比如：
.dark-theme {background-color: #333;color: #fff;
}
2. 表单验证样式
在表单验证中，classList 也可以用来快速地为输入框添加错误或成功的样式。例如，当用户输入的值不符合要求时，可以为输入框添加 error 类：
if (input.value === '') {input.classList.add('error');
} else {input.classList.remove('error');
}
通过这种方式，我们可以非常方便地控制表单的样式变化，增强用户体验。
五、总结
在 Web 开发中，通过 style、className 和 classList 操作 DOM 元素的 CSS 样式是非常常见的需求。style 属性适用于快速操作内联样式，但在处理复杂样式时显得不够灵活。相比之下，className 和 classList 提供了更强大的方式来管理元素的类名，使样式控制变得更加便捷和可维护。