1

I have a div with it's style class. I define it's style as follow.

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

And in JS I define a method for a click event.

exitWidget(event){
        if(event.target === document.getElementsByClassName("widgetContainer")[0])
        {
            document.getElementsByClassName("widgetContainer")[0].style.height = "3rem";
            document.getElementsByClassName("widgetContainer")[0].style.width = "3rem";
        }
    }

The CSS style and the event do what is expected. The problem is when I hover the div again after the event. The properties height and width don't grow to fill the screen. It's like JS overrided the CSS properties. Is there something I'm missing?

Oscar Figueroa
  • 71
  • 7
  • 2
    The `style` properties of an element have the highest priority, overriding styles from CSS, unless you put `!important` into the CSS. – Barmar Jun 01 '21 at 20:22
  • 1
    Like @barmar said, the inline style of an element is the #1 priority for styling. the "inline" means unlike putting your styles in a separate file, it is in the HTML tags. for example, to make a span element red, `hi` is inline styling instead of `span{ color: red }`. so to override this inline styling, put an `!important` at the end of every style. so `width: 100% !important;` for one style, and so on. – doo_doo_fart_man Jun 01 '21 at 20:26
  • Hello @Barmar I tried with the !important rule. But now my JS event is not working. – Oscar Figueroa Jun 01 '21 at 20:29
  • The issue as explained is the specificity weight. You need to maintain the same specificty weight. So either use inline-style for thsie elements or use JS to add or remove classes. – tacoshy Jun 01 '21 at 20:37
  • PS: if you use vanilla JS I would either use `querySelector` or `querySelectorAll` instead of `getElementByClassName – tacoshy Jun 01 '21 at 20:39
  • @tacoshy Yes, but inline styles should be avoided whenever possible. Just like inline scripting. Keep each language as separate from each other as possible all the time. – Scott Marcus Jun 01 '21 at 20:47
  • @ScottMarcus I totally agree. But to maintaint he specificity weight it is one of the 2 options you have to do it. That comment does not intend to tell what the OP should do but what he could do without prioritizing my personal ipinion on it. – tacoshy Jun 01 '21 at 20:49
  • @tacoshy I get it, but it's really not personal opinion. Inline anything === bad for a bunch of demonstrable reasons and so you should feel totally fine advising people to avoid them in favor of other options. – Scott Marcus Jun 01 '21 at 20:52

1 Answers1

2

While the comments do correctly tell you that inline styles are the most specific type of style you can apply, and are therefore the most difficult to override, avoid using !important whenever you can because it's an override to the normal specificity rules that CSS follows and makes your code harder to understand and maintain.

Instead, use CSS classes when you can because it's easy to override a class with another class. And while you've done that for your ":hover" styling, you can also do it in JS using the classList API, which makes the code even simpler and easy to scale without duplication of code.

Oh, and don't use getElementsByClassName().

// 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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71