trying to acess css properties of a div using javascript

Question

I tried to access the width of a div using javascript, but every time it is printing NaN no matter what i set it. I am new to javascript, what is wrong with my code ?

    <html>
    <head>
        <title>hello</title>


        <style type="text/css">

      #base
      {
        width:300px;
        height:30px;
        background-color: black;
      }

      #scr
      {
        height:30px;
        width:10px;
        background-color: red;
      }

    </style>


    <script type="text/javascript">

    var magic = function()
    {
    console.log("inside magic")
    var d = document.getElementById("scr");
    var b =  d.style.width;
    console.log(b);
    b = parseInt(b);

    console.log(b);

    }


    </script>

    </head>

    <body>

    <div id="base">
    <div id = "scr" >
    </div>
    </div>

    <br>
    <button onclick="magic()">Magic</button>


    </body>
</html>

@user1263375: I don't see the accepted answer using jQuery. And the answer you accepted now is the same as the one from the other question. — Felix Kling, Feb 16 '13 at 21:06
The style property is actually the attribute style of the element. So when you have element.style is actually referencing what is contained in style. In your case, if you had ...style="width:20px;" then element.style would print 20px. — Magic Lasso, Dec 24 '13 at 17:51
What you are wanting is not an attribute but rather a calculated property of the element itself. In this case, with plain javascript its often easiest to use width = element.offsetWidth || element.clientWidth || element.scrollHeight; — Magic Lasso, Dec 24 '13 at 17:52

paperstreet7 · Answer 1 · 2013-02-16T21:06:02.970

1

You can use this function to do that:

function getStyle(el,styleProp)
{
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

The explanation of what's going on is here Note that you must use element's id to access its style property through the function. If you want to use selectors use document.querySelector() in place of document.getElementById()

edited Feb 16 '13 at 21:06

answered Feb 16 '13 at 21:00

paperstreet7

2,058
1
15
18

If both if statements don't match their conditions then this code causes an undefined error. – John Aug 16 '16 at 18:46

score 0 · Accepted Answer · answered Feb 16 '13 at 21:04

0

you should try

d.offsetWidth

instead of

d.style.width

answered Feb 16 '13 at 21:04

abbood

23,101
16
132
246

Why d.style.width isnt working, shoudnt it work ? – user1263375 Feb 16 '13 at 21:05
2

@user1263375: Because the style is not set on the element but via CSS rules. – Felix Kling Feb 16 '13 at 21:07

score -1 · Answer 3 · answered Feb 16 '13 at 21:08

-1

The code d.style.width returns the width explicitly specified by css while d.offsetWidth returns the computed width.

answered Feb 16 '13 at 21:08

Alex Williams

355
1
4

trying to acess css properties of a div using javascript

3 Answers3