Question

如何为HTML元素设置多个CSS类，至少有一个普通类和一个或多个Javascript变量作为类？

以下是我尝试做的方式，将其放入普通脚本中：

然后我看到有人推荐这个：

<div class="style-a <script type="text/javascript">style-b</script>">

但我很确定这只适用于一个班级。

思考？提前谢谢。

Answer 1

使用setAttribute

var element = document.getElementById('myDiv');
element.setAttribute('class','class1 class2');

在action

中查看

Answer 2

您不能在html属性中插入脚本元素来插入由动态评估代码计算的数据。

相反，您可以应用以下模板：

<div id="#dyn-styles-1" class="style-a">
    <!-- div contents -->
</div>

<!-- ... -->

<script>
    //
    // Beware:
    //  - Execute _after_ the complete DOM has been built ( use handlers for `load` or `DOMContentLoaded` events)
    //  - Proof of concept only: coding style not recommended for production code
    //
    var js_var_containing_class = "style-b";

    //...

    document.getElementById("dyn-styles-1").className = document.getElementById("dyn-styles-1").className + " " + js_var_containing_class;

</script>

您不需要依赖ID，而是可以引用现有的css类：

var el = document.getElementsByClassName("style-a");

for (var i=0; i< el.length; i++) {
    el[i].className = el[i].className + " " + js_var_containing_class;
}

带有javascript变量的多个css类

2 个答案: