Add a CSS attribute with JavaScript using the cssText function

Question

I managed to insert an attribute in the html tag, using this code in JavaScript:

document.documentElement.style.cssText = 'cursor: url("https://image0.png"), auto !important;';

Therefore, the result in CSS was:

html {
    cursor: url("https://image0.png"), auto !important;
}

Now, I know this is probably a silly question, but I can't find the right JavaScript code to obtain this CSS result:

a {
    cursor: url("https://image1.png"), auto !important;
}

.content img {
    cursor: url("https://image2.png"), auto !important;
}

Why are you using JavaScript to add these styles? You can just have the styles in a CSS file and link to that. — chrwahl
– chrwahl, Commented May 20, 2021 at 12:34

chrwahl · Accepted Answer · 2021-05-20 12:42:05Z

1

As I read your question you would like to dynamically add CSS styles to your document using JavaScript.

You can add one or more style elements to the document.body. In this example it is just a string of CSS. An alternative could be to add a link element to the document.head.

var styleELm = document.createElement('style');
styleELm.innerText = "p {color: Steelblue} a {text-decoration: none}";
document.body.appendChild(styleELm);

<p>Hello <a href="#">World</a></p>

answered May 20, 2021 at 12:42

chrwahl

14.1k2 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add a CSS attribute with JavaScript using the cssText function

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related