JavaScript可以與CSS進行交互嗎？

如果我設置在鏈接的JavaScript的東西是一個變量：JavaScript可以與CSS進行交互嗎？

color1 = green;

可我後來調用CSS變量，像這樣？

div { 
    color : color1 
}

來源

2016-02-16 DerpyLe Squid

直到CSS實際上正確[* *支持變量**]（http://caniuse.com/#feat=css-variables）...不。 –

最接近你現在要詢問的內容（關於變量）是使用CSS預處理語言，如SASS或LESS：[http://sass-lang.com/]（ http://sass-lang.com/） –

在嘗試將這兩者結合起來之前，您需要學習JavaScript和CSS。另外，你的問題是不可理解的，請重新翻譯。 –

不，不是這樣。但是，如果您有興趣在CSS中使用varibales，則可能需要學習LESS，SASS或其他CSS預處理器。

來源

2016-02-16 13:23:33 Anton

爲什麼不提SASS？你正在推薦一個特定的工具。這是有偏見的。嘗試提供***所有CSS預處理器***以提供OP研究選項。 –

@ Mr.Polywhirl，是的，繼續，列出他們所有的:)。希望你不要認爲LESS和SASS是唯一的（儘管它們是最受歡迎的）。 – Anton

不，我知道還有其他人，但他們的確是最受歡迎的。 –

實施例：

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

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

在上述例子中，JS代碼選擇元件h1使用ID並且改變它的顏色爲綠色。所以JS實際上正在改變內聯CSS屬性。

來源

2016-02-16 13:25:37

編號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>

來源

2016-02-16 13:27:46 Turnip

JavaScript可以與CSS進行交互嗎？

回答

相關問題