How can I read a CSS property value using Javascript?

Question

function displayWidth(){
  
  document.getElementById("navbar").className = "navbar-after-click";
  alert(document.getElementById("navbar").style.width);
  
  }

#navbar {
  background-color:red;
  height:200px;
  }
.navbar{
   width :220px;
}
.navbar-after-click{
    width:60px;
}

<html>
  <body>
    <div id="navbar" class="navbar">
      
    </div>
    <button type="button" onclick="displayWidth();">show width </button>
  </body>
</html>

I'm not too familiar with Javascript, that is why I am asking this question. In the above code I tried to alert a CSS property value using Javascript. But it doesn't alert any value as I expected. Is there any wrong with my code? How can I fix this?

You should use .offsetWidth property : alert(document.getElementById("navbar").offsetWidth); — Treast, Oct 21 '16 at 04:07
you can use offsetWidth to get the width of your div element — Monasha, Oct 21 '16 at 04:07
You can use `getComputedStyle()` as explained in [this question](http://stackoverflow.com/questions/31956136/can-i-use-javascript-to-check-the-style-properties-on-an-object-which-has-been-s?noredirect=1&lq=1) and various other duplicates. If you use the `.style` object you only get inline styles. — nnnnnn, Oct 21 '16 at 04:07
Possible duplicate of [How to get an HTML element's style values in javascript?](http://stackoverflow.com/questions/2664045/how-to-get-an-html-elements-style-values-in-javascript) — Manish, Oct 21 '16 at 04:09
@treast,monasha but 'offsetWidth' is returning a value undefined — , Oct 21 '16 at 04:12
@WhiteMaskers Use `getComputedStyle` to get the width of navbar — Mark Wilson, Oct 21 '16 at 04:15
@WhiteMaskers its working fine for me, I'll post the code below — Monasha, Oct 21 '16 at 04:17

score 3 · Answer 1 · answered Oct 21 '16 at 04:12

Use getComputedStyle

Plknr Demo:

http://plnkr.co/edit/BQEdwqeZgZ1Nc02ZeAzQ?p=preview

Stack Snippet:

function displayWidth(){
  
  document.getElementById("navbar").className = "navbar-after-click";
  var nav = document.getElementById("navbar");
   var navWidth = window.getComputedStyle(nav,null).getPropertyValue("width");
  alert(navWidth);
  
  }

#navbar {
  background-color:red;
  height:200px;
  }
.navbar{
   width :220px;
}
.navbar-after-click{
    width:60px;
}

<html>
  <body>
    <div id="navbar" class="navbar">
      
    </div>
    <button type="button" onclick="displayWidth();">show width </button>
  </body>
</html>

Glad that it helped. Have a great day – Mark Wilson Oct 21 '16 at 04:18 — Mark Wilson, Oct 21 '16 at 04:18

score 1 · Answer 2 · answered Oct 21 '16 at 04:13

1

You can find it by jQuery.

$("#navbar").css("width")

answered Oct 21 '16 at 04:13

Nitheesh

19,238
3
22
49

sorry,i'm not using jquery i need an answer with java script – Oct 21 '16 at 04:15

sms247 · Accepted Answer · 2016-11-07T03:57:42.080

use this script for you code

      <script type="text/javascript">
            function displayWidth(){
      var element = document.getElementById('navbar');
       var style = window.getComputedStyle(element);
 alert(style.width);  //style. all possible objects list in the end

      }
        </script>

demo:

<!DOCTYPE html>
<html>
<head>
    <style>
        #navbar {
  background-color:red;
  height:200px;
  }
.navbar{
   width :220px;
}
.navbar-after-click{
    width:60px;
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
    <html>
  <body>
    <div id="navbar" class="navbar">
      
    </div>
    <button type="button" onclick="displayWidth();">show width </button>
  </body>
</html>
    <script type="text/javascript">
        function displayWidth(){
  var element = document.getElementById('navbar');
    style = window.getComputedStyle(element);
 alert(style.width);
  
  }
    </script>
</body>
</html>

style. //all possible objects list in below link

http://www.w3schools.com/jsref/dom_obj_style.asp

that's great to hear that you achieved your goal, good luck for your remaining project — sms247, Oct 21 '16 at 05:20
can you please tell me about changes need to be done even if we put `getElementsByClassName` instead of `getElementById` — , Oct 21 '16 at 10:59
for this purpose you should add jquery and user .css() function which can get any property of element — sms247, Oct 26 '16 at 06:29

score 1 · Answer 4 · answered Oct 21 '16 at 04:37

1

Here is the solution.

     function displayWidth(){

       var style = window.getComputedStyle(document.getElementById("navbar"),  null);
       var width= style.getPropertyValue("width");
       console.log(width);

     }

answered Oct 21 '16 at 04:37

Shariq Ansari

3,941
1
27
30

score 0 · Answer 5 · edited Oct 21 '16 at 04:21

Using offsetWidth to get the width

<!DOCTYPE html>

 <html>
 <style>
  #navbar {
   background-color:red;
   height:200px;
  }
  .navbar{
   width :220px;
  }
  .navbar-after-click{
   width:60px;
  }
 </style>
 <body>
  <div id="navbar" class="navbar">

  </div>
  <button type="button" onclick="displayWidth();">show width </button>
 </body>


 <script type="text/javascript">
  function displayWidth(){

   document.getElementById("navbar").className = "navbar-after-click";
   alert(document.getElementById("navbar").offsetWidth);

  }
 </script>
 </html>

yes, as the class navbar is getting replaced by navbar-after-click when the button is clicked — Monasha, Oct 21 '16 at 04:27

How can I read a CSS property value using Javascript?

5 Answers5