DEV Community

Set CSS styles with javascript

Eugene Karataev on April 23, 2019

Let's say you have a paragraph. <p id="target">rainbow 🌈</p> Enter fullscreen mode Exit fullscreen mode ...
Read full post
Collapse
 
mzahraei profile image
Ardalan • • Edited

hey can you maybe help me ?
I have some things like this and I just want to Update the hidden class but I Update Complete Style 

<style id="style"> .hidden{ animation-name: bgshower; animation-duration: 2s; position: absolute; z-index: 2; } .neopa{ background-color: darkred; font-size: large; } </style>
Enter fullscreen mode Exit fullscreen mode

var style = document.getElementById('style');
var counter = parseInt(60);

 style.innerHTML = ` .bghidden { height: 100%; width: 100%; background-color: #E96565; top: 0; left: 0; `+ 'animation-duration:' + counter + "s" + `; animation-name: bgshower; animation-delay: 0s; position: absolute; z-index: 2; } `; document.adoptedStyleSheets = [style];
Enter fullscreen mode Exit fullscreen mode
Collapse
 
karataev profile image
Eugene Karataev •

I'm not 100% sure what you're trying to achieve, but if you need to add animations on an element(s) with JS after some event, consider the following way:

  • Define styles with css like 
.hidden { ... } .animate { ... }
Enter fullscreen mode Exit fullscreen mode
  • Add/remove CSS classes with animations when necessary with DOM API: document.querySelectorAll('.hidden').classList.add('animate')
Collapse
 
mzahraei profile image
Ardalan •

Thanks for writing but I just wanted to update an element's CSS with JS.
no more new class I wanted to Edit animation-duration value from JS.
I resolve it thx

Collapse
 
yellow1912 profile image
yellow1912 •

With CSSStyleSheet, what is the best way to replace a rule? I see insertRule seems to take an index, if I re-use that same index then that rule will be replaced? The reason is that I want to allow the endusers to change some styles via a UI, then quickly update that to the specific element.

Collapse
 
freq32 profile image
freq32 •

3 veeery interesting. thanks for the tip ;)

Collapse
 
marlo22 profile image
marcin93 • • Edited

It's something I'm looking for. Thanks a lot!

Collapse
 
smz_68 profile image
Ardalan • • Edited

really great post i like it

Collapse
 
codemilli profile image
Jooyoung Moon •

Hi :D
I just wondered if using insertRule for performance or not and I found this article. Thanks !

But how it differ?

Collapse
 
karataev profile image
Eugene Karataev •

I don't think you ever need to use insertRule in your day-to-day job unless you hit some performance bottleneck when working with styles.
I think optimizations with insertRule are useful for libraries (like styled-components), but add unnecessary complexity when developing regular websites or apps.

Collapse
 
xgqfrms profile image
xgqfrms •

developers.google.com/web/updates/...

Collapse
 
xgqfrms profile image
xgqfrms •

style.setContent bug ❌ 

 const style = document.createElement(`style`); // this.shadowRoot.appendChild(this.templateContent); // log(`this.shadowRoot`, this.shadowRoot); style.setContent = ` .run { width: 100px; height: 100px; background: url(https://www.boston.com/wp-content/uploads/2016/05/yuge_anger.png) 0 0; animation: run 500 step(6) infinite; } @keyframes run { from { background-position: 0 0; } to { background-position: -600px 0; } } `;
Collapse
 
zouhair_sahtout profile image
Zouhair Sahtout •

Thanks man for sharing, I was looking for something like this long ago

Collapse
 
mzahraei profile image
Ardalan •

great

Collapse
 
nagarjundeepak profile image
Nagarjun •

this is really helpful :)