使用JavaScript动态设置CSS样式的三种常用方式
一、理论基础
1.1 三种主要的方式
在 JavaScript 中，有三种主要的方式可以动态设置 CSS 样式：
- 直接操作元素的 style 属性：这是最直接的方式，通过 JavaScript 直接修改元素的内联样式。
- 修改元素的 classList 属性：通过添加、移除或切换元素的 CSS 类来改变样式。
- 修改 <style> 标签的内容：通过 JavaScript 动态修改 <style> 标签中的 CSS 规则。
1.2 优先级说明
不同的样式设置方式有不同的优先级，内联样式（通过 style 属性设置）的优先级最高，其次是 <style> 标签中的样式，最后是外部 CSS 文件中的样式。
二、具体实现方法及示例
2.1 直接使用元素的 setAttribute() 方法操作元素的 style 属性
原理
在 JavaScript 里，setAttribute() 是 DOM 元素对象的一个方法，可用于为指定的 HTML 元素设置属性值。它的基本语法如下：
element.setAttribute(name,value)
示例代码
使用setAttribute()方法
<body>
<div id="myBox" class="myBox">
<script>
// 获取div元素
const boxs = document.getElementById('myBox');
// 直接设置 boxs 的 style 属性
boxs.setAttribute('style', 'width: 200px; height: 200px; background-color: red;');
</script>
</body>
优缺点
在网页开发中，使用 setAttribute() 方法设置元素 style 属性有其独特的优势和不足之处，以下是详细分析：
优点
- 减少 DOM 操作次数以提高性能：通过
setAttribute()方法将属性的值直接设置到元素的属性中，而非通过 JavaScript 对象来操作，能够减少 DOM 操作的次数，进而提高网页性能。因为频繁的 DOM 操作会导致浏览器进行重排和重绘，影响页面的响应速度和性能。 - 提高代码的可读性和可维护性：当需要设置多个样式属性时，使用
setAttribute()方法可以将所有样式集中在一个字符串中，使代码更加简洁和易于理解，也便于后续的修改和管理。相比于多次使用element.style.property = value的方式，代码结构更加清晰。
- 减少 DOM 操作次数以提高性能：通过
缺点
样式优先级问题：使用
setAttribute()设置的内联样式具有较高的优先级，可能会覆盖外部样式表或内部样式表中的样式。这可能导致样式的控制变得复杂，难以预测最终的显示效果。例如，如果外部样式表中定义了某个元素的基本样式，而使用setAttribute()设置了相同的样式属性，那么内联样式将优先显示，可能破坏整体的样式设计。缺乏动态性和灵活性：使用
setAttribute()方法设置的样式是静态的，一旦设置就很难根据不同的条件动态地修改样式。而使用element.style可以更方便地在 JavaScript 中动态修改单个样式属性。例如，如果需要根据用户的交互动态改变元素的宽度，使用element.style.width可以直接修改，而使用setAttribute()则需要重新设置整个style属性字符串，操作相对繁琐。
代码可维护性在某些情况下降低：虽然
setAttribute()可以使代码在一定程度上更加简洁，但当样式字符串过长或包含复杂的样式规则时，代码的可读性和可维护性会降低。例如，当样式字符串中包含大量的 CSS 属性和值时，很难快速定位和修改特定的样式属性。
2.2 直接使用 DOM节点.style.样式名 = 样式值的方式，这种方式可称为“直接设置内联样式”
原理
在 JavaScript 里，document.getElementById() 会获取具有特定 id（）的元素。而获取到的元素对象具备 style 属性，该属性能够让我们直接操作元素的内联样式。通过给 style 属性的具体样式属性（像 width、height、backgroundColor 等）赋值，就可以动态地修改元素的外观。
示例代码
<body>
<div id="myBox" class="myBox">
<script>
// 获取div元素
const boxs = document.getElementById('myBox');
// 直接设置 boxs 的 style 属性
boxs.style.width = '200px';
boxs.style.height = '200px';
boxs.style.backgroundColor = 'blue';
</script>
</body>
优缺点分析
- 优点
- 简单直接：可以迅速对元素的样式进行修改，不用去修改 CSS 文件或者操作类名，代码编写容易理解。
- 即时生效：设置之后元素的样式会马上改变，能够实现实时的交互效果。
- 缺点
- 无法设置 !important：当使用这种方式设置样式时，无法添加 !important 声明，要是遇到有 !important 的样式规则，此设置可能会失效。
- 可维护性差：如果有大量的样式需要设置，会让 JavaScript 代码变得冗长，并且不利于样式的统一管理和维护。
2.3 修改元素的 classList 属性
原理
classList 属性是一个 DOMTokenList 对象，它提供了一系列方法来操作元素的 CSS 类，如 add、remove、toggle 等。DOMTokenList 是一个类数组对象，代表了元素的 class 属性中的一组标记（即类名），这些方法可以让我们方便地动态修改元素的类名，从而改变元素的样式。
常用方法及示例代码
1. add() 方法
作用：用于向元素的 classList 中添加一个或多个类名。如果类名已经存在，则不会重复添加。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态设置样式 - classList 属性</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<button id="highlightButton">高亮显示</button>
<p id="myText">这是一段文本，点击按钮可以高亮显示它。</p>
<script>
const button = document.getElementById('highlightButton');
const text = document.getElementById('myText');
button.addEventListener('click', function () {
// 添加 highlight 类
text.classList.add('highlight');
});
</script>
</body>
</html>
上述代码中，通过 add 方法为 id 为 myText 的元素添加了 highlight 类，元素的背景颜色会变为黄色，字体会变粗。
代码解释
- 在 CSS 中定义了一个名为
highlight的类，该类包含了背景颜色和字体加粗的样式。 - 通过
document.getElementById方法获取按钮和文本元素。 - 给按钮添加一个点击事件监听器。
- 当按钮被点击时，使用
text.classList.add('highlight')方法给文本元素添加highlight类，从而改变其样式。
2. remove() 方法
作用：用于从元素的 classList 中移除一个或多个类名。如果类名不存在，不会报错。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">这是一个测试 div。</div>
<script>
const myDiv = document.getElementById('myDiv');
myDiv.classList.remove('highlight');
</script>
</body>
</html>
上述代码中，remove 方法将 myDiv 元素的 highlight 类移除，元素的背景颜色恢复默认。
3. toggle() 方法
作用：用于在元素的 classList 中切换类名。如果类名存在，则移除它；如果类名不存在，则添加它。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv">这是一个测试 div。</div>
<button onclick="toggleClass()">切换类名</button>
<script>
function toggleClass() {
const myDiv = document.getElementById('myDiv');
myDiv.classList.toggle('highlight');
}
</script>
</body>
</html>
上述代码中，击按钮时，toggle 方法会在 myDiv 元素的 classList 中切换 highlight 类的存在状态，从而改变元素的背景颜色。
4. contains() 方法
作用：用于检查元素的 classList 中是否包含指定的类名。返回一个布尔值。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="myDiv" class="highlight">这是一个测试 div。</div>
<script>
const myDiv = document.getElementById('myDiv');
const hasHighlight = myDiv.classList.contains('highlight');
console.log(hasHighlight); // 输出: true
</script>
</body>
</html>
上述代码中，contains 方法检查 myDiv 元素是否包含 highlight 类，并将结果存储在 hasHighlight 变量中。
使用 classList 属性的优势
- 代码简洁：使用 classList 提供的方法可以用较少的代码实现类名的操作，避免了手动拼接和解析 class 属性字符串的繁琐。
- 提高可读性：方法名直观地表达了操作的意图，使代码更易于理解和维护。
- 避免错误：classList 方法会自动处理类名的添加、移除和切换，避免了手动操作可能导致的语法错误和意外结果。
2.4 修改 <style> 标签的内容
原理
可以通过 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>动态设置样式 - 修改 style 标签内容</title>
</head>
<body>
<button id="changeStyleButton">改变样式</button>
<div id="myDiv">这是一个 div 元素，点击按钮可以改变它的样式。</div>
<script>
const button = document.getElementById('changeStyleButton');
const div = document.getElementById('myDiv');
button.addEventListener('click', function () {
// 创建一个新的 style 元素
const style = document.createElement('style');
// 设置 style 元素的内容
style.innerHTML = `
#myDiv {
border: 2px solid blue;
padding: 10px;
}
`;
// 将 style 元素添加到 head 中
document.head.appendChild(style);
});
</script>
</body>
</html>
代码解释
- 通过
document.getElementById方法获取按钮和 div 元素。 - 给按钮添加一个点击事件监听器。
- 当按钮被点击时，创建一个新的
<style>元素，并设置其内容为新的 CSS 规则。 - 最后，将
<style>元素添加到<head>标签中，从而改变 div 元素的样式。
四、总结
通过以上三种方式，我们可以在 JavaScript 中动态设置 CSS 样式。直接操作 style 属性适合临时、简单的样式修改；修改 classList 属性适合根据不同状态切换预定义的样式；修改 <style> 标签内容适合动态创建全局的 CSS 规则。在实际开发中，可以根据具体需求选择合适的方式.
以上就是使用JavaScript动态设置CSS样式的三种常用方式的详细内容，更多关于JS动态设置CSS样式的资料请关注脚本之家其它相关文章！
相关文章
xmlplus组件设计系列之路由（ViewStack)（7）
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之路由，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章是JavaScript插件化开发系列教程的第五篇，还是着重于实战，通过具体的实例来学习jQuery的方式如何开发插件，有相同需求的小伙伴来参考下吧。2015-02-02
大家在使用Dreamweaver中的时间线功能或以做出很有趣的动画效果，Dreamweaver会自动为用户生成特定的程序代码，大家有没有想过动画的实现原理呢？2013-07-07
这篇文章主要介绍了vant倒序年月日期组件封装实例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-03-03
JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
我们用了5篇文章来讨论如何编写一个JavaScript异步调用框架（问题 & 场景、用例设计、代码实现、链式调用、链式实现），现在是时候让我们看一下在各种常见开发情景中如何使用它了。2009-08-08
最好用的Bootstrap fileinput.js文件上传组件
这篇文章主要为大家详细介绍了最好用的Bootstrap fileinput.js文件上传组件的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
本文给大家介绍了js控制台的使用，非常不错，具有一定的参考借鉴借鉴价值，需要的朋友参考下吧2018-07-07
在web开发中我们经常各种各样的需求。今天小编给大家介绍JS区分浏览器页面是刷新还是关闭标签页，非常实用，感兴趣的童鞋参考下吧2016-04-04
这篇文章主要介绍了js数组去重的11种方法，对js数组感兴趣的同学，可以把这11种方法实验一下2021-04-04
这篇文章主要介绍了Easyui form combobox省市区三级联动 的相关资料,需要的朋友可以参考下2016-01-01
最新评论