CODEWITHSUNDEEP
javascripthtmlcss
user3581595
user3581595

Reputation: 13

Change background color if width is bigger

I want to change the background color if width is bigger than 100.

This is my code but it doesn't work.

Thanks for any help!

<html>
<head>
<style type="text/css">
div#mydiv {
    width: 200px;
    height: 100px;
    background-color: red;
}
</style>
<script language="JavaScript">
function () {
    var mydiv = document.getElementById("mydiv");
    var curr_width = parseInt(mydiv.style.width);
    if (curr_width > 100) {
    mydiv.style.BackgroundColor = "blue";
    }
}

</script>
</head>
<body>

<div id="mydiv" style=""></div>

</body>
</html>

Upvotes: 0

Views: 179

Answers (6)

MoOx
MoOx

Reputation: 8991

To get a proper computed width, you need to use the (not enough used) method getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

Latest browsers have .width property, otherwise you just need to take right - left to get it.

Some comments: - language="JavaScript" is useless. Like type="text/javascript". It's the default behavior. Seriously. - you need to execute your code after the div has been created. So using onload or just by calling the code after in the html (like in my example)

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv {
    width: 200px;
    height: 100px;
    background-color: red;
}
</style>
</head>
<body>

<div id="mydiv"></div>

<script>
  /* run the code after the creation of #mydiv */
  var mydiv = document.getElementById("mydiv");
  var clientRect = mydiv.getBoundingClientRect()
  var curr_width = clientRect.width || (clientRect.right - clientRect.left);
  if (curr_width > 100) {
    mydiv.style.backgroundColor = "blue";
  }
</script>
</body>
</html>

Here is a working example http://jsbin.com/xapet/1/edit

Warning: to do this properly it's recommended that you execute this code each time the browser is resized. Maybe you can take a look to the "element queries" thing, that will be a nice workaround according to media queries limitations.

https://encrypted.google.com/search?hl=en&q=element%20queries%20css

Upvotes: 0

Leo
Leo

Reputation: 5235

Assuming your function to be called onload. Here's the code:

<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function load(){
var mydiv = parseInt(document.getElementById("mydiv").offsetWidth);
if (mydiv > 100) {
document.getElementById("mydiv").style.backgroundColor = "blue";
}
}

</script>
</head>
<body onload="load();">

<div id="mydiv" style=""></div>

</body>
</html>

Changes:

  • Use offsetWidth to get the width of the div.
  • Use backgroundColor instead of BackgroundColor.

Upvotes: 0

boniezuvyz
boniezuvyz

Reputation: 99

I assume this is a duplicate question. Anyway, your intialization of curr_width need not include parseInt. parseInt is for converting a value to integer type and here you doesnt require it.

Your code can be re-written as 

<html>
    <head>
    <style type="text/css">
    div#mydiv {
        width: 200px;
        height: 100px;
        background-color: red;
    }
    </style>
    <script language="JavaScript">
    function () {
        var mydiv = document.getElementById("mydiv");
        var curr_width = mydiv.offsetWidth;
        if (curr_width > 100) {
        mydiv.style.BackgroundColor = "blue";
        }
    }

    </script>
    </head>
    <body>

    <div id="mydiv" style=""></div>

    </body>
    </html>

Upvotes: 0

danhardman
danhardman

Reputation: 621

Change

parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";

To

mydiv.offsetWidth
mydiv.style.backgroundColor = "blue";

Upvotes: 2

David Jones
David Jones

Reputation: 4305

Change:

var curr_width = parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";

to:

var curr_width = mydiv.offsetWidth;
mydiv.style.backgroundColor = "blue";

I have set up a fiddle here.

Also notice I took it out of the function because it looked like it wasn't being called anywhere. You should also move the script out of the head to the bottom of the body tag or use window.onload.

UPDATE

Another fiddle with everything together

Upvotes: 0

John V
John V

Reputation: 875

use

var curr_width = mydiv.offsetWidth;

instead

var curr_width = parseInt(mydiv.style.width);

Upvotes: 0

Related Questions