使用JavaScript更改CSS文件屬性值

什麼是使用JavaScript更改CSS值的正確和最快的方法？舉例來說，如果我有一個style.css的文件：使用JavaScript更改CSS文件屬性值

#h1 { 
color: 'red'; 
}

我需要的顏色更改爲任何其他顏色，並更新CSS文件。

來源

2017-10-11 Dilakshan Sooriyanathan

可能重複的[用JavaScript改變CSS值]（https://stackoverflow.com/questions/566203/changing-css-values-with-javascript） –

document.querySelector('#h1').style.color = 'your-color';

來源

2017-10-11 07:25:20 sjahan

JS：

document.getElementById("elementsId").style.color= "red";

我的建議是不要使用ID名稱像h1因爲它可能是在HTML的標籤<h1>混亂。使用更清晰的變量名稱，如headerId。

用於改變多個CSS屬性使用此：

document.getElementById(elementsId).setAttribute("style","wi‌dth: 500px; background-color: yellow;");

來源

2017-10-11 07:25:23

但這隻會改變當時的顏色。我也想改變CSS文件的值。 –

@DilakshanSooriyanathan，你不能用javascript更新CSS文件的值，但是你可以改變多個CSS屬性，像這樣：document.getElementById（elementsId）.setAttribute（「style」，「width：500px; background-color：yellow;」） ;''或者你可以事先在css中編寫一個類，並在需要時使用js將這個類添加到你的元素中，如prashant指出的那樣 –

你不能更改CSS文件，CSS不是動態的。最好的辦法是使用某種預處理器（Saas/Less），重新生成一個CSS文件並卸載前一個並加載一個新文件。 – sjahan

多個CSS屬性變化使用與classname添加。它降低DOM

document.querySelector('#h1').classList.add('your-class')

來源

2017-10-11 07:26:49 prasanth

$('h1').css('color','#ff5722');

#h1 { 
 
color: 'red'; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<h1> this color tho</h1>

的代碼行

jquery是來自jav ascript所以一旦你學習jQuery你有時會回到javascript

來源

2017-10-11 07:45:29

使用JavaScript更改CSS文件屬性值

回答

相關問題