Question

如果我将链接JavaScript中的内容设置为变量：

color1 = green;

我可以稍后在CSS中调用变量吗？

div {
  color : color1
}

Answer 1

不，不是这样的。但是，如果您对在CSS中使用varibales感兴趣，可能需要学习LESS，SASS或其他CSS预处理器。

Answer 2

示例：

<h1 style="color:red;" id="red"> I am red </h1>
<script> //JS

document.getElementById("red").setAttribute("style", "color:green;");
</style>

在上面的示例中，JS代码使用id选择元素h1并将其颜色更改为绿色。所以JS实际上改变了内联CSS属性。

Answer 3

没有。 CSS无法访问Javascript变量。

要以这种方式使用您的变量，您可以使用Javascript将其分配给元素style属性。对于单个元素，它可能看起来像这样：

var color1 = 'green',
    el = document.getElementById('myDiv')

el.style.color = color1;

<div id="myDiv">Hello</div>

或许多元素：

var color1 = 'green',
    els = document.querySelectorAll('.changeColour')

for (var i = 0; i < els.length; i++) {
    els[i].style.color = color1;
}

<div class="changeColour">Hello</div>
<div class="changeColour">Hello</div>

JavaScript可以与CSS交互吗？

3 个答案: