当前位置：首页 > 行业动态 > 正文

如何在CSS中直接使用JavaScript变量？

admin
行业动态
2025-01-27
5

CSS 使用 JS 变量可通过 CSS 自定义属性（变量）实现，在 CSS 中定义变量并在 JS 中修改其值来改变样式。

在前端开发中，CSS 和 JavaScript 是两个非常重要的技术，我们需要在 CSS 中使用 JavaScript 变量来实现更灵活的样式控制，以下是详细的介绍：

如何在CSS中直接使用JavaScript变量？第1张

1、通过行内样式使用

示例代码：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS 使用 JS 变量示例</title>
     </head>
     <body>
         <div id="myDiv">Hello, World!</div>
         <script>
             // 定义 JavaScript 变量
             var myColor = "blue";
             var myFontSize = "20px";
             // 获取元素并设置行内样式
             var myDiv = document.getElementById("myDiv");
             myDiv.style.color = myColor;
             myDiv.style.fontSize = myFontSize;
         </script>
     </body>
     </html>

效果：页面加载后，id 为myDiv 的<div> 元素的文字颜色将变为蓝色，字体大小将变为 20px，这种方式简单直接，适用于动态改变少量元素的样式，但行内样式会覆盖元素已有的样式表中的相同属性，且不利于样式的集中管理和复用。

2、通过操作样式表使用

示例代码：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS 使用 JS 变量示例</title>
         <style>
             /* 初始样式 */
             #myDiv {
                 color: black;
                 font-size: 16px;
             }
         </style>
     </head>
     <body>
         <div id="myDiv">Hello, World!</div>
         <script>
             // 定义 JavaScript 变量
             var myColor = "red";
             var myFontSize = "24px";
             // 获取样式表中的样式规则
             var styleSheet = document.styleSheets[0];
             var cssRules = styleSheet.cssRules;
             // 遍历规则找到目标规则并修改属性值
             for (var i = 0; i < cssRules.length; i++) {
                 if (cssRules[i].selectorText === "#myDiv") {
                     cssRules[i].style.color = myColor;
                     cssRules[i].style.fontSize = myFontSize;
                     break;
                 }
             }
         </script>
     </body>
     </html>

效果：页面加载后，id 为myDiv 的<div> 元素的文字颜色将变为红色，字体大小将变为 24px，这种方法可以修改已存在的 CSS 样式表中的规则，对于一些需要在运行时动态调整样式的场景非常有用，比如主题切换等，但如果样式表较为复杂，查找和修改特定规则可能会比较麻烦。

3、通过添加或删除 CSS 类使用

示例代码：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS 使用 JS 变量示例</title>
         <style>
             /* 初始样式 */
             #myDiv {
                 color: black;
                 font-size: 16px;
             }
             .newStyle {
                 color: green;
                 font-size: 30px;
             }
         </style>
     </head>
     <body>
         <div id="myDiv">Hello, World!</div>
         <button onclick="changeStyle()">Change Style</button>
         <script>
             function changeStyle() {
                 // 定义 JavaScript 变量（这里通过按钮点击事件触发）
                 var shouldApplyNewStyle = true;
                 // 获取元素并添加或删除 CSS 类
                 var myDiv = document.getElementById("myDiv");
                 if (shouldApplyNewStyle) {
                     myDiv.classList.add("newStyle");
                 } else {
                     myDiv.classList.remove("newStyle");
                 }
             }
         </script>
     </body>
     </html>

效果：页面加载后，默认情况下id 为myDiv 的<div> 元素显示初始样式，当点击 “Change Style” 按钮时，会根据shouldApplyNewStyle 变量的值来决定是否添加或删除newStyle 类，如果添加了该类，元素的文字颜色将变为绿色，字体大小将变为 30px；如果删除该类，则恢复初始样式，这种方式可以将样式的定义和 JavaScript 逻辑分离，使得代码更加清晰和易于维护，同时也方便在不同元素之间复用样式，但如果需要频繁地添加和删除类，可能会影响性能。

4、通过 CSS 自定义属性和 JavaScript 变量结合使用

示例代码：

     <!DOCTYPE html>
     <html lang="en">
     <head>
         <meta charset="UTF-8">
         <title>CSS 使用 JS 变量示例</title>
         <style>
             :root {
                 --main-color: black;
                 --main-font-size: 16px;
             }
             #myDiv {
                 color: var(--main-color);
                 font-size: var(--main-font-size);
             }
         </style>
     </head>
     <body>
         <div id="myDiv">Hello, World!</div>
         <button onclick="changeCustomProperties()">Change Style</button>
         <script>
             function changeCustomProperties() {
                 // 定义 JavaScript 变量（这里通过按钮点击事件触发）
                 var newColor = "purple";
                 var newFontSize = "28px";
                 // 获取根元素并修改 CSS 自定义属性的值
                 document.documentElement.style.setProperty('--main-color', newColor);
                 document.documentElement.style.setProperty('--main-font-size', newFontSize);
             }
         </script>
     </body>
     </html>

效果：页面加载后，id 为myDiv 的<div> 元素显示由根元素的 CSS 自定义属性--main-color 和--main-font-size 所控制的样式，当点击 “Change Style” 按钮时，会通过 JavaScript 修改这些自定义属性的值，从而动态改变元素的样式，这种方法可以实现更灵活和强大的样式控制，尤其适用于需要根据不同条件动态调整多个相关样式属性的场景，但需要对 CSS 自定义属性有一定的了解和掌握。

以下是两个关于 CSS 使用 JS 变量的常见问题及解答：

问题 1：如何在不刷新页面的情况下，使用 JavaScript 动态更改元素的多个 CSS 属性？

答：可以通过操作元素的style 对象来动态更改其 CSS 属性，先获取要更改样式的元素，然后使用element.style.propertyName = value; 的形式逐个设置属性值，也可以先将多个属性值存储在一个对象中，然后遍历该对象来批量设置属性，还可以通过添加或删除 CSS 类、修改 CSS 自定义属性等方式来实现。

问题 2：使用 JavaScript 修改 CSS 样式时，如何确保兼容性？

答：尽量使用标准的 CSS 属性和方法，避免使用特定浏览器的私有属性，在进行复杂的样式操作时，可以先进行兼容性测试，在不同的主流浏览器上检查效果，对于一些可能不兼容的特性，可以使用特性检测或 polyfill 来进行兼容性处理，保持代码的简洁和清晰也有助于提高兼容性和可维护性。

小编有话说：CSS 与 JavaScript 的结合为我们提供了丰富的样式控制手段，无论是简单的样式调整还是复杂的动态效果，都可以通过合理运用上述方法来实现，在实际开发中，我们应根据具体需求选择最适合的方式，以打造出美观、交互性强的网页界面。