Search code examples
javascriptjqueryclassonloadtransition

Why CSS class isn't applied (using JavaScript onload)?

I'm trying to add class after page is loaded so the transition in added class can change height and opacity of element, but I still can't get it working.

html file:

<head>
  <script>
    window.onload = function {
      document.getElementById('home-id').className='home-class';
    };
  </script>
</head>

css file:

#home-id {
    transition: opacity 1.5s ease-in-out 0s;
    height: 0.0em;
    opacity: 0.6;
}
html:hover #home-id {
    transition: opacity 1.5s ease-in-out 0s;
    opacity: 1;
}
.home-class {
    transition: height 1s ease-in-out 0s, opacity 1.5s ease-in-out 0s;
    height: 40em;
    opacity: 1;
}

Could you please tell me what I'm doing wrong, thank you.

Edit: I just add that problem wasn't in missing "()", but in specificity.

Solution

  • You could use the classList:

    // div is an object reference to a <div> element with class="foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");

// if visible is set remove it, otherwise add it
div.classList.toggle("visible");

//  add/remove visible, depending on test conditional, i less than 10
div.classList.toggle("visible", i < 10 );

alert(div.classList.contains("foo"));

div.classList.add("foo","bar"); //add multiple classes

    It gives you more flexibility than using className property.

    And your function for the onload method should be:

    window.onload = function() {
  document.getElementById('home-id').className='home-class';
};

    You missed the () for function.

    MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList