如何更改页面中所有元素的CSS-JavaScript
[英]How to change the CSS of all the elements in the page - JavaScript
问题描述
I am looking for the best way to update stylesheet with JavaScript (runtime). 
我正在寻找使用JavaScript （运行时）更新样式表的最佳方法。 So far I know I could do it with querySelectorAll() . 到目前为止，我知道我可以使用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. 这种方法的问题在于，如果在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. document.styleSheets可能是我正在寻找的解决方案，但是我似乎找不到一种简单的方法来查找和替换CSS规则和/或属性。 It has few helpful functions such as insertRule and addRule . 它几乎没有有用的功能，例如insertRule和addRule 。 I am not sure how I can use them effectively to replace the CSS properties. 我不确定如何有效地使用它们来替换CSS属性。
Any help would be appreciated! 任何帮助，将不胜感激！
PS: Although I would prefer JavaScript , but jQuery would work fine as well. PS:虽然我更喜欢JavaScript ，但是jQuery也可以正常工作。 I can find a way to convert jQuery to JavaScript 我可以找到一种将jQuery转换为JavaScript
Background: There are few websites I use on daily basis such as waffle.io and I don't like their theme. Background:我每天使用的网站很少，例如waffle.io ，我不喜欢它们的主题。 I am trying to customize it with a Chrome Extension and JavaScript . 我正在尝试使用Chrome Extension和JavaScript对其进行自定义。 Changing the HTML attributes would not help in this scenario, because waffle.io continuously updates the DOM. 在这种情况下，更改HTML属性将无济于事，因为waffle.io不断更新DOM。 I want to run the script once at the beginning and I want the newly mounted elements to have the updated styles. 我想在开始时运行一次script ，并且希望新安装的元素具有更新的样式。 Due to this continuous change in the DOM, I believe it is essential to update the CSS rules/properties in stylesheet itself. 由于DOM中的这种持续变化，我相信更新样式表本身中的CSS规则/属性非常重要。 (I could be wrong) （我可能是错的）
Please let me know if its still unclear what I am trying to achieve. 如果尚不清楚我要达到的目标，请告诉我。
3 个解决方案
解决方案1
1 已采纳 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. 不能100％地确定要执行的操作，但是可以执行的操作是将html标签引入一个类，该类充当要尝试实现的替代。
So by default you would have: 因此，默认情况下，您将拥有：
<html class="normal">
...
</html>
and with javascript you would just replace/add the class "updated" or whatever: 并使用javascript，您只需替换/添加“ updated”类或任何其他内容：
<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. 这样一来， .updated将predecence了.normal的.foo类，因为它会具有较高的特异性。 This might be the easiest way to target all elements on the page with JS and CSS if I understood your question correctly. 如果我正确理解了您的问题，这可能是使用JS和CSS定位页面上所有元素的最简单方法。
Hope that helps! 希望有帮助！
解决方案2
0 2018-10-25 04:03:05
我认为您不清楚要做什么，但是您可以使用js轻松更改外部链接样式表的src属性
解决方案3
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. 您可以在html元素上添加类，也可以仅在CSS中为html元素添加属性。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.