After reading the "Implementation Method of Dynamically Creating or Adding CSS Style Sheets with JavaScript", it is easy for you to figure out how to modify CSS Style Sheets.
I happened to meet a friend on the forum today asking this question:
<style>.ls{width=120px;}</style><script>//Add a sentence here to change the value of width in .ls, how to write it</script>Some friends answered: "If there are many objects using .ls, it is really inconvenient to use JS, jquery is convenient, $(".ls").width(200); that's fine."
He wants to use JQ's class selector.ls to select all objects that use this style and adjust them one by one, rather than changing the CSS style sheet, so there are concerns about "lots of objects".
But the problem is that this only changes the specific expression style of those objects, not the .LS settings. If another element using .LS style appears, it will still be the same. You still need to adjust this element again, to treat the symptoms but not the root cause. Moreover, this method also determines that it is impossible to achieve it simply in one sentence.
There are quite a few people who think about this, and if you read the article "Implementation Method of Dynamically Creating or Adding CSS Style Sheets with JavaScript", I believe you will easily think of how to solve this problem in one sentence, which is both concise and efficient (the browser will automatically reset all elements that apply this style), and truly modify the style settings. The newly added elements that use this style will automatically apply the modified settings. So, you have learned higher-level knowledge that is distinguished from many people. Let me explain the method in detail below:
Because of the above example, it is not easy to see the effect. I have written another example below. It is easier to see the effect through the color change:
<STYLE>.theforever {width:50px;color:red;}#theforever {width:150px;color:silver;}</STYLE><div>It should be red here, but it will be turned yellow by the JS below by changing the CSS style settings</div><div id="theforever">It should be silver-gray here. Indeed, this will not change, just for comparison</div><script>document.styleSheets[0].cssText=document.styleSheets[0].cssText.replace(/red/g,"yellow");// Isn't it OK? </script>The above example is not aimed at a specific style name, but general colors (if you move it directly into a more complex CSS page with RED words that do not indicate colors, this can also lead to errors. I have always been extremely disgusted with the use of code that is not brain-based and does not give too many instructions), but it is also easy to change it to a specific style name:
From the above, we can see that document.styleSheets[0].cssText is the content inside the entire <STYLE></STYLE>, which is equivalent to a string variable. So if you want to change its settings for .LS, you only need to use ".ls{width=120px;}" as the replacement part to replace and ".ls{width=555px;}" as the replacement target, and that's fine.
The above article on how to dynamically modify CSS style sheets with JavaScript is all the content I share with you. I hope it can give you a reference and I hope you can support Wulin.com more.