How to Modify Style to HTML Elements (Styled Externally With Css) Using Js

// Just get your static element references just once, not every time
// the function runs and don't use getElementsByClassName().
const widget = document.querySelector(".widgetContainer");

widget.addEventListener("mouseout", exitWidget);

function exitWidget(event){
 if(event.target === widget){
     widget.classList.add("otherClass"); // <-- How simple is that?!
 }
}

.widgetContainer:hover{
    border-radius: 0rem;
    top: 0rem;
    left: 0rem;
    height: 100%;
    width: 100%;
    background:yellow;
}

.otherClass {
  height:3rem;
  width:3rem;
}

<div class="widgetContainer">This is the widget container</div>

Changing inline style vs. changing external stylesheet style using JS

When temporarily accessing or modifying an element's style using Javascript, there is no difference involved in whether that style was defined inline or in css - you will get the style that is applied by precedence and Javascript changes will override any declared style.

However, general best practice is to have a separate stylesheet (or maybe several if you intend to have conditional stylesheets for IE9 and below, or to split up lots of styles into manageable chunks)

This method is less complicated when it comes to debugging and changing styles in real time.

With external stylesheets you can change the entire site in seconds by dropping a new .css file in place. You can't do that with inline styles.

How to modify class on an element created by an external javascript

Sure. You could just modify the existing class that the script applies to the element to change its appearance. But you mentioned in a comment that you want to edit once instance of the button but not others. You might still be able to do that with the right CSS selector if that button has some special property (eg its always the nth child of its parent). But otherwise you can do it with JavaScript.

Just write a script that runs after the existing script finishes. Then select the target button and remove its existing class and replace it.

elements = document.getElementsByClassName('rycfill-btn');
theButton = elements[3]; // or whatever you need to do to get the one you want and ignore the other one
theButton.className = 'myClass'; // This should both add the new class and overwrite the old one

Of course, you need some way to differentiate between the button you want to change and the one you don't. If you the you do want to change is made first you can just run the script that modifies the button before its loaded. Otherwise you need to know something about it (eg it will always be the second instance on the page).

You can probably do it more elegantly if you use jQuery or some other DOM manipulation library.

CSS style to inline style via JavaScript

You can do something like this:

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

Where x is the element you want to apply the style to.

Basically this function gets the computed style of the element and then copies each property (like padding, background, color, etc.) to the inline style of the element.

I don't know why you need to do this, but it's a really dirty approach in my opinion. I would personally advise against it.

How to create a style tag with Javascript?

Try adding the style element to the head rather than the body.

This was tested in IE (7-9), Firefox, Opera and Chrome:

var css = 'h1 { background: red; }',
    head = document.head || document.getElementsByTagName('head')[0],
    style = document.createElement('style');

head.appendChild(style);

style.type = 'text/css';
if (style.styleSheet){
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

CSS not working properly on Custom HTML Elements

Additionally to Brad's answer. One of the ways you can apply styles from the Light DOM to the Shadow DOM is with CSS Variables.

smooth-button{
  display: block;

  --button-color: blue;
  --button-background-color: orange;
}

render() {
  this.shadow.innerHTML = `
    <style>
      button {
        color: var(--button-color);
        background-color: var(--button-background-color);
      }
    </style>

    <button>
      ${this.getAttribute("text")} ${this.SumOfNo1AndNo2}   
    </button>
  `;
)

---

Related Topics