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
 
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
 
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
 
mzahraei profile image
Ardalan •

great

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
 
nagarjundeepak profile image
Nagarjun •

this is really helpful :)