使用JavaScript更改CSS文件属性值

Question

What is the proper and fastest way to change CSS values using JavaScript? For example, if I have a style.css file:

#h1 {
 color: 'red';
}

I need to change the color to any other color and update the CSS file.

Answer 1

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

Answer 2

JS:

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

My recommendation would be not to use Id name like h1 as it may be confusing with the <h1> tag in html. Use more clear variable name like headerId .

for changing multiple css properties use this:

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

Answer 3

对于多个CSS属性更改，请使用classname add .it减少dom中的代码行

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

Answer 4

 $('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 is from javascript so once you learn jquery you will sometimes go back to javascript