How to dynamically modify CSS style sheets with JavaScript _javascript tips

After reading my "How to dynamically create or add CSS style sheets with JavaScript," It's easy to figure out how to modify a CSS style sheet.

Just today in the forum met a friend asked such a question:

<style>
ls{width=120px;}
</style>
<script>
//Add a sentence here to change the value of width in LS, how to write
</script>

Some friends replied: "If you use. LS objects a lot of words, with JS is really inconvenient, jquery convenient, $ (". ls "). Width (200); so it's OK.

He wanted to use JQ's class selector. LS selects all objects that use this style, adjusts them one by one, rather than changing the CSS style sheet, so there is a "lot of objects" concern.

But the problem is, it's just changing the specific style of the objects, not the changes. LS's setting. If a second occurrence is used. LS-style elements, it is still the same as the old, you need to adjust to this element, the symptoms do not cure. And this approach also determines that it is impossible to simply pass a sentence on the implementation.

There are a lot of people who think so, and if you look at the article, "dynamically creating or adding CSS style sheets to JavaScript", it's easy to think about how to solve the problem with a sentence, which is simple and efficient (the browser will automatically reset all elements that apply this style), And really changed the style settings, the new element that uses this style will automatically apply the settings that have been modified. As a result, you have learned the higher-order knowledge that separates many people. Let me say a few more details about the method below:

Because of the above example, it is not easy to see the effect, I wrote another example, through the change in color, more easily see the effect:

<STYLE>
	theforever {width:50px;color:red}
	#theforever {width:150px;color:silver;}
</STYLE>
<div class= "Theforever" > here should be red, but it will be the following JS by changing the CSS style settings to become yellow </div>
<div id= " Theforever "> Here should be silvery-gray, and indeed this will not change, only as a contrast </div>
<script>
document.stylesheets[0].csstext= Document.stylesheets[0].csstext.replace (/red/g, "yellow");
A sentence, not just OK?
</script>

The above example does not target a particular style name, but rather a generic color (if you move directly to a more complex CSS page, which has a red typeface that does not represent a color), it can also cause errors. I've always been extremely disgusted with copycat code, not too much, but it's also easy to make changes to a particular style name:

From the above, you can see that document.stylesheets[0].csstext is the entire <STYLE></STYLE> internal content, the equivalent of a string variable, so if the target. LS to change its settings, just need to put ". ls{width=120px;}" As replacement to replace the part, the ". ls{width=555px;}" As a replacement target, that's all.

The above how to use JavaScript to implement dynamic modification of CSS style sheet is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.