Discussions » Development

How to add CSS code from JS code?

§
Posted: 2019-12-24
Edited: 2019-12-24

How to add CSS code from JS code?

Let assume I want to run such simple CSS code:

@-moz-document domain("mignews.com") { a { color: red; } } But I want to invoke it from JS code I can create the string: var css = '@-moz-document domain("mignews.com") { a {color: red; }}' But I don't know how to run this CSS code inside JS code. As @JasonBarnabe explained то me, by this way I can add CSS to a document:

 let styleNode = document.createElement("style");
 styleNode.appendChild(document.createTextNode(css));
 (document.querySelector("head") || document.documentElement).appendChild(styleNode);
What should be added to JS code in addition in order to invoke this simple CSS code?

§
Posted: 2019-12-24

The problem is that if you are running this on Chrome, the @-moz-document will not be recognized. You can drop that part and rely on the script's @include to do the filtering.

You may also need to add !important to your CSS to ensure it beats the site's code.

§
Posted: 2019-12-24

@JasonBarnabe написал: The problem is that if you are running this on Chrome, the @-moz-document will not be recognized. You can drop that part and rely on the script's @include to do the filtering.

You may also need to add !important to your CSS to ensure it beats the site's code.

@JasonBarnabe написал: The problem is that if you are running this on Chrome, the @-moz-document will not be recognized. You can drop that part and rely on the script's @include to do the filtering.

You may also need to add !important to your CSS to ensure it beats the site's code.

Thank you very much!!! It works!!! <3

Post reply

Sign in to post a reply.