Change Class with javascript

Question

I have a site using a body background image. When the browser is resized, I want to change the body class.

JavaScript:

function MOSTRA() {
   var SCR = screen.availWidth
   var BRW = window.outerWidth

   if BRW < SCR {
      document.getElementById(BODY).className = 'BDYL'
   }
   else { 
      document.getElementById(BODY).className = 'BDNL' 
   }
}

HTML:

<body id="BODY" class="BDNL" onResize="MOSTRA()">

I thought the class would be changed (to one that is Background-size:auto), but it isn't. How can i change the background size or the whole class? I can't use more than Javascript, HTML, or CSS.

Guffa · Accepted Answer · 2012-07-11 22:31:12Z

4

You need parentheses around the condition in the if statement, and apostrophes (or quotation marks) around the strings BODY.

Also, you should separate the lines with semicolons. The script parser automatically adds them at the end of lines if the statement can end at the line, but you may get unexpected error messages if you forget an ending parenthesis so that the parser can't add the semicolon automatically.

You might also want to call the function from the onload event for the body, so that the class is set when the page has loaded.

function MOSTRA() {

  var SCR = screen.availWidth;

  var BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.getElementById('BODY').className = 'BDYL';
  } else {
    document.getElementById('BODY').className = 'BDNL';
  }
}

Demo: http://jsfiddle.net/Guffa/q56WM/

edited Jul 11, 2012 at 22:31

answered Jul 11, 2012 at 22:23

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Guffa Over a year ago

@Andreas: Thanks for spotting that. I'm pretty sure that I did type it, but I might have accidentally removed it when formatting the code...

Victor Bressani de Mello Over a year ago

Thank you very much, now it does work :D, but is there anyway to make a div fixed in one place? because if i get the browser with less width, the div changes itself to enter in the space, so the menu become vertical D:

Guffa Over a year ago

@VictorBressanideMello: You can use position: absolute; or position: fixed; to fix an element to the document or the window, respectively.

Besnik · Accepted Answer · 2012-07-12 07:32:00Z

1

This works:

<script type="text/javascript">
window.onload = function () {
  window.onresize = function (evt) {
    var width = window.innerWidth || 
     (window.document.documentElement.clientWidth || window.document.body.clientWidth);

    if (width < screen.width)
    {
        document.body.className = 'BDYL';
    }
    else
    {
        document.body.className = 'BDNL';
    }

  }
};
</script>

edited Jul 12, 2012 at 7:32

answered Jul 11, 2012 at 22:31

Besnik

6,5581 gold badge33 silver badges34 bronze badges

Comments

Jonathan Hall · Accepted Answer · 2019-09-10 08:29:13Z

Not exactly sure what you are actually trying to achieve (a link to the page you are working on would be helpful), the following came to my mind though:

You may want to use fluid layout techniques (Use percent values for container dimensions in CSS) to ensure that your DIV-elements render relative to the viewers screen resolution (read: it's parents dimensions - either a parenting DIV-element or the body element, which will be of 100% width, representing the available width to your page.

div {width:60%}
Think again about the way you implement the background image, if you need your elements on page to align to the background image you should not set the background image to background-size:contain as this introduces a lot of hassle when trying to line everything up on window resize. Instead, slice your background into parts and assign the resulting smaller images to the different parts of the page that need to line up with it.
Relevant when designing for different resolutions: Media Queries and responsive layouts.
You may want to check jQuery resize(). jQuery will take care of different browser implementions of the resize event.
```
$(window).resize(function() {
    $('body').prepend('<div>' + $(window).width() + '</div>');
});
```
Also this will give you the possibility to implement your JavaScript much more elegant by using the jQuery Events System. This is, of course, only relevant if any further JavaScript work is planned on the page. I'm actually only referencing this for the sake of completion.

The code you posted is not valid.

You missed the line ending semicolon (though the code might be working, because interpreters usually do a good job guessing it).
No need to use an ID on the body element, simply get it via document.getElementsByTagName().
You need to put the tag name (BODY) into quotes.
Put the condition of the if else statement into paranthesis.

Your code should look something like this:

function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.getElementsByTagName('BODY').className = 'BDYL';
    } else { 
        document.getElementsByTagName('BODY').className = 'BDNL';
    }
}

Or as MaxArt pointed out, simply use document.body

function MOSTRA() {

    var SCR = screen.availWidth;
    var BRW = window.outerWidth;

    if (BRW < SCR) {
        document.body.className = 'BDYL';
    } else { 
        document.body.className = 'BDNL';
    }
}

If all of this does not help, bear with me, as I really could only guess what your problem is. As said, a link to the page in question would be helpful.

Also, your question made the impression that you are new to all of this, if not, please excuse my rambling.

wanovak · Accepted Answer · 2012-07-11 22:22:26Z

0

I don't see why you need to use JavaScript for this.

CSS:

body {
     position: relative;
     width: 100%;
}

answered Jul 11, 2012 at 22:22

wanovak

6,12727 silver badges32 bronze badges

Comments

Christofer Eliasson · Accepted Answer · 2012-07-11 22:29:06Z

0

You have a syntax error in your code. You are not passing a string to getElementById().

This:

document.getElementById(BODY).className = 'BDYL'

Should be this (with quotation marks, to make it a string):

document.getElementById("BODY").className = 'BDYL'

Update:

Or as MaxArt points out in his comment, just document.body.className = "BDYL"

Update 2:

You also have a syntax error in your if-statement, as pointed out by Mikahil, so you function could look like this instead:

function MOSTRA() {

  var SCR = screen.availWidth,
      BRW = window.outerWidth;

  if (BRW < SCRI) {
    document.body.className = 'BDYL';
  } else {
    document.body.className = 'BDNL'; 
  }
}

edited Jul 11, 2012 at 22:29

answered Jul 11, 2012 at 22:22

Christofer Eliasson

34k7 gold badges77 silver badges103 bronze badges

5 Comments

MaxArt Over a year ago

And why not document.body, since we're at it?

Qnan Over a year ago

... and the parentheses are missing in the if statement condition

MaxArt Over a year ago

I was also wandering why nobody used document.body.className = BRW < SCR ? "BDYL" : "BDNL" so far. The ternary operator is faster than the if...else statement.

Guffa Over a year ago

@MaxArt: I think that any performance difference there is negligible compared to the action of setting an attribute of a DOM element, and the conditional operator is not so easy to understand for a beginner. If you would want to make a performance difference, you would keep the current value in a variable and compare against that, so that you only change the element attribute when the value actually changes.

MaxArt Over a year ago

Well, I never had any issues with the ternary operator, and it's way faster to write code with it. It could be just me, anyway. You're right with the performance part, I was just generally speaking.

Collectives™ on Stack Overflow

Change Class with javascript

5 Answers 5

3 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related