HTML Change Class Name Based on Screen Size

Question

I am trying to change the name of a class tag dynamically when a user loads the page based off of the screen size. Here is the code:

<!DOCTYPE html>
<html>
<body onload="changeClass()">

<section class="example">
    <p>Hello</p>
</section>

<section class="example">
    <p>New section</p>
</section>

<script>
function changeClass() {
    var x = document.getElementsByClassName('example');
    var width = (window.innerHeight > 0) ? window.innerHeight : screen.Height;
    console.log(width);
    if(width <= 640) {
        while(x.length > 0) {
            x[1].className ='newClass'; 
        }
    } else {
        while(x.length > 0) {
            x[0].className = "example";
        }
    }
}
</script>
</body>
</html>

However, the page is thrown into an infinite loop and cannot load the data. Is there an easy way to set the class named based on the size of the screen? Can I use an "if conditional" check when the page loads? I have also included a JSFiddle. I don't know how much that will help however.

why are you doing this with javascript and not media queries in css? it's a bit overkill to use javascript to handle style changes. — Puzzle84, Mar 08 '17 at 03:39
Is your end goal to apply different styles to an element based on the screen size? Or is there another reason to change the class name? — Rob Reagan, Mar 08 '17 at 03:40
I am just looking for the easiest way to do this. People online were suggesting Javascript. I just want to change the element name based off of the screen size. — , Mar 08 '17 at 03:40
media queries is more than enough if your primary goal is to change style based of screen size — Carl Binalla, Mar 08 '17 at 03:41
I need to change the class name specifically inside of the element tag. — , Mar 08 '17 at 03:41
I am already using media queries. I have to specifically change the class name inside of the tag. — , Mar 08 '17 at 03:43
Why do you need to change the class? that is the crux of the problem here. answer below is correct. Are you're using classes to create code behavior ? — Puzzle84, Mar 08 '17 at 03:45
You can try this [answer](http://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px#answer-34995563) by leymannx. — c.k, Mar 08 '17 at 03:53

score 2 · Accepted Answer · answered Mar 08 '17 at 03:44

As mentioned in the comments, media queries are the best way to achieve what you're trying to do here.

That said, to answer the actual question as it currently stands with your code, you are getting into an infinite loop because you are using a while loop. The length of the array will never reach zero, so your while loop will never exit.

Consider using the following code

if(width <= 640) {
    for(var i = 0; i < x.length; i++) {
        x[i].className ='newClass'; 
    }
}

Obviously you would need to change both while loops.

All that said though, I would strongly recommend you use media queries for this unless you have a compelling reason not to.

If the idea is just to change styles based on screen size, you could accomplish this with the following addition to your stylesheet

@media (max-width: 640px) {
    .example {
        ... styles to show on smaller screens ....
    }
}

Thank you. I know how to use media queries. They way I wrote the code needs to be fixed. I was just looking for an easier way out for this specific issue I am facing. — , Mar 08 '17 at 03:52

score 0 · Answer 2 · answered Mar 08 '17 at 03:59

There are couple of problems that I can see in your code. The first thing is the way you are getting the screen width is incorrect.

it should be corrected as below.

var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;

And the second thing is you don't need any loop at all. Just following code will be more than enough to achieve what you are looking for.

function changeClass() {
    var x = document.getElementsByClassName('example');
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.Width;
    console.log(width);
    if(x.length > 0) {
        if(width <= 640) {
            x[1].className ='newClass'; 
        } else {
            x[0].className = "example";
        }
    }
}

HTML Change Class Name Based on Screen Size

2 Answers2