:root { --main-bg-color: lightblue; }，在 JS 中用 document.documentElement.style.setProperty('--main-bg-color', 'lightgreen') 修改其值。在前端开发中，CSS 本身不能直接引用 JavaScript 变量，但可以通过一些间接的方法来实现类似效果，以下是几种常见的方式：
1、通过 JavaScript 操作 DOM 元素样式
获取 DOM 元素并设置样式属性：可以使用 JavaScript 的document.getElementById、document.querySelector 等方法获取需要设置样式的元素，然后直接修改其样式属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#myElement {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="myElement"></div>
<script>
// 获取元素
var element = document.getElementById('myElement');
// 设置元素的样式属性，这里的 color 是 JS 变量
element.style.backgroundColor = 'red';
</script>
</body>
</html> 批量设置多个元素的样式：如果需要对多个元素应用相同的样式变化，可以先获取这些元素的集合，如使用document.getElementsByClassName 或document.querySelectorAll，然后遍历集合进行样式设置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.myClass {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="myClass"></div>
<div class="myClass"></div>
<div class="myClass"></div>
<script>
// 获取所有具有 myClass 类名的元素
var elements = document.querySelectorAll('.myClass');
// 遍历元素集合并设置样式
elements.forEach(function (element) {
element.style.backgroundColor = 'lightgreen';
});
</script>
</body>
</html> 2、使用 CSS 变量和 JavaScript 动态更改变量值
定义 CSS 变量：在 CSS 中，可以使用 来定义变量。
:root {
--main-color: pink;
}
.box {
width: 200px;
height: 200px;
background-color: var(--main-color);
} 在 JavaScript 中动态更改 CSS 变量的值：通过 JavaScript 获取根元素（:root），然后使用style.setProperty 方法来更改 CSS 变量的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
:root {
--main-color: pink;
}
.box {
width: 200px;
height: 200px;
background-color: var(--main-color);
}
</style>
</head>
<body>
<div class="box"></div>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
// 获取根元素
var root = document.documentElement;
// 更改 CSS 变量的值
root.style.setProperty('--main-color', 'lightblue');
}
</script>
</body>
</html> 在组件内部使用 CSS 变量和 JavaScript 动态绑定：在一些框架或组件库中，也可以在组件内部使用 CSS 变量和 JavaScript 动态绑定的方式来实现样式的动态变化，例如在 Vue 项目中：
<template>
<div :style="{ '--height': height + 'px' }">
<div class="test">css中使用js变量</div>
</div>
</template>
<script>
export default {
data() {
return {
height: 100,
};
},
};
</script>
<style scoped>
.test {
width: 200px;
background-color: pink;
height: var(--height);
}
</style> 3、使用内联样式和模板字符串（ES6）：在 JavaScript 中，可以使用模板字符串来构建包含变量的内联样式字符串，并将其赋值给元素的style 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myElement"></div>
<script>
// 定义一个颜色变量
let color = 'lightgreen';
// 使用模板字符串构建内联样式字符串
let inlineStyle =width: 200px; height: 200px; background-color: ${color};;
// 获取元素并设置其 style 属性为内联样式字符串
document.getElementById('myElement').style = inlineStyle;
</script>
</body>
</html> 4、在行内的 style 属性中定义 CSS 变量并赋值为 JS 变量：可以在行内样式中使用类似--var:${jsVariable} 的形式来定义 CSS 变量并赋值为 JavaScript 变量，然后在 CSS 中使用这些行内定义好的 CSS 变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div style="--color: pink; --height: 100px; width: 200px; height: var(--height); background-color: var(--color);"></div>
<script>
// 获取元素并修改其自定义属性（即 CSS 变量）的值
var element = document.querySelector('div');
element.style.setProperty('--color', 'lightblue');
element.style.setProperty('--height', '150px');
</script>
</body>
</html> 虽然 CSS 不能直接引用 JavaScript 变量，但通过上述方法可以实现类似的效果，使页面样式能够根据 JavaScript 中的数据进行动态变化，从而增加页面的交互性和灵活性。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1523999.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复