css 样式接受js传值

CSS样式接受JS传值是前端开发中的重要技术，它实现了动态渲染页面效果的目的，本文将为大家详细介绍如何使用CSS样式接受JS传值。

1. 内联样式

<div id="Box" style="background-color: red;"></div>
<script>
    var Box = document.getElementById("Box");
    Box.style.width = "100px";
</script>

在以上代码中，首先给div元素设置一个内联样式，即背景颜色为红色，然后使用JS获取该元素，并通过修改style属性中的width属性，将Box元素的宽度设置为100px。

2. 外部样式表

<!-- HTML代码 -->
<div id="Box"></div>
<!-- CSS代码 -->
#Box {
    background-color: red;
}
<!-- JS代码 -->
var Box = document.getElementById("Box");
Box.className = "BoxWidth";

以上代码中，先使用CSS设置id为Box的div元素的背景色为红色，接着在JS中通过修改元素的className属性，将其指定为BoxWidth类，从而达到修改元素宽度的目的。

3. 外部样式表 + attr()函数

<!-- HTML代码 -->
<div id="Box" data-width="100"></div>
<!-- CSS代码 -->
#Box {
    background-color: red;
    width: attr(data-width px);
}
<!-- JS代码 -->
var Box = document.getElementById("Box");
Box.dataset.width = "200";

以上代码中，首先在div元素中添加data-width属性用于存储宽度的值，接着在CSS中使用attr()函数获取data-width的值，并将它赋给元素的宽度属性。最后在JS中按需修改data-width的值即可改变元素宽度。

以上就是CSS样式接受JS传值的常见方法，我们可以根据实际开发需求，选择合适的方式对CSS样式进行动态修改，从而实现更加灵活的页面效果。