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

如何在CSS中读取JavaScript变量？

admin
行业动态
2025-01-29
4

### ，，CSS读取JS变量：通过JavaScript的 getComputedStyle()方法获取CSS变量值，并使用 setProperty()方法修改其值，实现动态样式调整。

CSS读取JS变量可以通过多种方式实现，以下是一些常见的方法：

如何在CSS中读取JavaScript变量？第1张

使用CSS自定义属性与JavaScript交互

1、定义CSS自定义属性：在CSS中通过:root选择器定义自定义属性，例如:root { --main-bg-color: lightblue; }。

2、获取和修改自定义属性值：在JavaScript中，可以使用getComputedStyle()方法获取元素的所有计算后的样式值，然后通过getPropertyValue()方法获取指定CSS属性的值；也可以使用setProperty()方法来修改CSS变量的值。

获取值：let root = document.documentElement; let bgColor = getComputedStyle(root).getPropertyValue('--main-bg-color');。

修改值：root.style.setProperty('--main-bg-color', 'lightgreen');。

3、在CSS中使用自定义属性：在CSS中可以使用var()函数引用自定义属性来设置样式，如body { background-color: var(--main-bg-color); }。

动态创建样式表

1、创建新的样式表：使用JavaScript的document.createElement("style")创建一个<style>元素，并设置其type属性为"text/css"，然后将其添加到文档的<head>中，例如let styleSheet = document.createElement("style"); styleSheet.type = "text/css"; document.head.appendChild(styleSheet);。

2、向样式表中添加规则：使用insertRule()方法向样式表中插入CSS规则，可以动态地添加和修改CSS规则，适用于复杂的动态样式需求。styleSheet.sheet.insertRule("body { background-color: lightblue; }", 0);。

通过JavaScript直接修改元素的样式属性

1、获取元素：使用document.querySelector()等方法获取要修改样式的元素，如let element = document.querySelector("body");。

2、修改样式属性：直接设置元素的样式属性，如element.style.backgroundColor = "lightblue";。

通过JavaScript控制类名来间接影响CSS

1、获取元素：同样使用document.querySelector()等方法获取元素，如let element = document.querySelector("body");。

2、添加、移除或切换类名：使用classList.add()、classList.remove()和classList.toggle()等方法来动态地添加、移除或切换元素的类名，从而改变元素的样式。

添加类名：element.classList.add("new-class");。

移除类名：element.classList.remove("old-class");。

切换类名：element.classList.toggle("toggle-class");。

编译时注入JavaScript变量到LESS文件（适用于使用LESS预处理器的情况）

1、安装必要的工具：需要安装gulp和gulp-less，可以使用命令npm install gulp gulp-less进行安装。

2、创建Gulp任务：编写一个gulpfile.js文件，并在其中创建任务。

   const gulp = require('gulp');
   const less = require('gulp-less');
   gulp.task('less', function () {
       const jsVariable = '#f00'; // 你的JS变量
       return gulp.src('src/less/*.less')
           .pipe(less({
               globalVars: {
                   'main-bg-color': jsVariable
               }
           }))
           .pipe(gulp.dest('dist/css'));
   });

3、运行Gulp任务：在命令行中运行gulp less命令，即可将JavaScript变量注入到LESS文件中，并生成相应的CSS文件。