CODEWITHSUNDEEP
javascripthtmlcss
SJJ
SJJ

Reputation: 11

How to change image element class with JavaScript based on window width?

I am trying to adjust the size of a background image based on the width of the window. I have been testing this, and I can get the alerts to show up in chrome when I 'inspect element' and change the width size, and the alerts show up as they should. But I cannot get the class of the image to change.

Any ideas?

This is my basefunctions.js file

window.onload = function changeClass(){
    if( window.innerWidth < 770 ) {
      document.getElementById("bg_img").setAttribute("class", "imgMobile");
      alert("On Mobile");
    }else{
      alert("Not on Mobile");
    }
}

This is my HTML/CSS

<script language="JavaScript" type="text/javascript" src="js/basefunctions.js"></script>

<style>

#bg_img {
    width: 100%;
    z-index: 1;
    border: 1px #000 solid;
    height:80%;
}

.imgMobile {
    display: none;
    width: 100%;
    z-index: 1;
    margin-left: -100;
}

</style>

<img src="img/gavel.png" alt="" id="bg_img" class="">

Upvotes: 1

Views: 6238

Answers (2)

shadowfox
shadowfox

Reputation: 505

You can set the class using

document.getElementById("bg_img").className = "imgMobile";

If you want to add the class without overriding other classes, then use

document.getElementById("bg_img").className += " imgMobile";

Upvotes: 0

Soturi
Soturi

Reputation: 1496

You should use className rather than using setAttribute.

document.getElementById("bg_img").className = "imgMobile";

Here is another SO about changing an dom object's class.

I also put together a jsfiddle to demonstrate.

Upvotes: 1

Related Questions