How to use JavaScript to dynamically modify CSS style sheets

Read what I wroteHow to use JavaScript to dynamically create or add a CSS style sheetThen you can easily figure out how to modify the CSS style sheet.

Today, a friend of mine asked the following question:

<Style>
. Ls {width = 120px ;}
</Style>
<SCRIPT>
// Add a sentence here to change the width value in. Ls. How to Write
</SCRIPT>

Some friends replied: "If there are many. ls objects, it is really inconvenient to use Js. jquery is convenient. $ (". ls "). Width (200); that's all ".

He wants to use the JQ class selector. ls to select all objects using this style and adjust them one by one, instead of changing the CSS style sheet, so there will be "many objects" concerns.

But the problem is that it only changes the specific expression style of those objects, rather than the. ls settings. If there is an element in the. ls style again, it is still the same, you still need to adjust this element to cure the problem. This method also makes it impossible to simply implement it in one sentence.

There are still a lot of people to think about, and if you readHow to use JavaScript to dynamically create or add a CSS style sheetThis articleAfter, I believe you can easily think of how to solve this problem with one sentence, which is concise and efficient (the browser will automatically reset all elements of the apply style), and actually modified the style settings, the newly added element that uses this style will automatically apply the modified settings. As a result, you have learned a higher level of knowledge that is differentiated from many people. Next I will discuss the specific method:

Because the above example is not easy to see the effect, I wrote another example below, through the color change, it is easier to see the effect:

<Style>. theforever {width: 50px; color: Red ;}# theforever {width: 150px; color: Silver ;} </style> <Div class = "theforever"> it should be red, however, it will be yellow by the following JS by changing the CSS style Settings </div> <Div id = "theforever"> Here it should be silver-gray, but it will not change, for comparison only </div> <SCRIPT> document.stylesheets%0%.csstext%document.stylesheets%0%.css text. replace (/red/g, "yellow"); // is it OK? </SCRIPT>

In the above example, it is not a specific style name, but a general color (if you move it directly to a page containing more complex CSS, there is a red word that does not represent the color, this also causes errors. I have always been very disgusted with unthinking code writers and have not given too many instructions), but if you want to change the name of a specific style, it is also easy:
From the beginning, we can see that document.stylesheets%0%.css text is the content inside <style> </style>, which is equivalent to a string variable. ls to change its settings, just put ". ls {width = 120px;} "as the replace to replace, put". ls {width = 555px;} "is used as the replacement target.