How to change the CSS of all the elements in the page - JavaScript
Question
I am looking for the best way to update stylesheet with JavaScript (runtime). So far I know I could do it with querySelectorAll() . That gives you all the elements match the query on the page. The problem with this approach is that if a new element mount on the DOM. I would have to manually replace its style, and it gets messier.
document.styleSheets might be the solution I am looking for, but I can't seem to find an easy way to find and replace CSS rules and/or properties. It has few helpful functions such as insertRule and addRule . I am not sure how I can use them effectively to replace the CSS properties.
Any help would be appreciated!
PS: Although I would prefer JavaScript , but jQuery would work fine as well. I can find a way to convert jQuery to JavaScript
Background: There are few websites I use on daily basis such as waffle.io and I don't like their theme. I am trying to customize it with a Chrome Extension and JavaScript . Changing the HTML attributes would not help in this scenario, because waffle.io continuously updates the DOM. I want to run the script once at the beginning and I want the newly mounted elements to have the updated styles. Due to this continuous change in the DOM, I believe it is essential to update the CSS rules/properties in stylesheet itself. (I could be wrong)
Please let me know if its still unclear what I am trying to achieve.
3 answers
solution1
1 ACCPTED 2018-10-25 04:01:51
Not 100% certain what you are trying to do, but what you could do, is to introduce a class to the html tag that acts as the override that you are trying to achieve.
So by default you would have:
<html class="normal">
...
</html>
and with javascript you would just replace/add the class "updated" or whatever:
<html class="normal updated">
...
</html>
Then in your stylesheets, you can have:
.normal .foo { /* normal styles */ }
.normal.updated .foo { /* the other styles */ }
In this way, .updated will take predecence over .normal for the .foo class because it will have higher specificity. This might be the easiest way to target all elements on the page with JS and CSS if I understood your question correctly.
Hope that helps!
solution2
0 2018-10-25 04:03:05
我认为您不清楚要做什么，但是您可以使用js轻松更改外部链接样式表的src属性
solution3
0 2018-10-25 04:07:18
You can do something of this sort. Here I am changing font size of all the elements. Similarly you can use other properties.
Either you can add a class on html element or just add a property to html element in css.
<!Doctype html> <html> <head> <style> html { font-size: 10px } * { font-size: 1rem } .first { font-size: 1.2rem } .second { font-size: 1.5rem } </style> <script> function increaseFontSize (key) { const fontSize = key === 'small' ? '10px' : '16px' document.documentElement.style.fontSize = fontSize } </script> </head> <body> <button onclick="increaseFontSize('large')">+</button> <button onclick="increaseFontSize('small')">-</button> <p class="first"> The constraints parameter is a MediaStreamConstraints object with two members: video and audio, describing the media types requested. Either or both must be specified. If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with NotFoundError. </p> <p> The constraints parameter is a MediaStreamConstraints object with two members: video and audio, describing the media types requested. Either or both must be specified. If the browser cannot find all media tracks with the specified types that meet the constraints given, then the returned promise is rejected with NotFoundError. </p> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.