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
– Treast, Commented Oct 21, 2016 at 4:07
you can use offsetWidth to get the width of your div element — Monasha
– Monasha, Commented Oct 21, 2016 at 4:07
You can use getComputedStyle() as explained in this question and various other duplicates. If you use the .style object you only get inline styles. — nnnnnn
– nnnnnn, Commented Oct 21, 2016 at 4:07
Possible duplicate of How to get an HTML element's style values in javascript? — Manish
– Manish, Commented Oct 21, 2016 at 4:09
@WhiteMaskers Use getComputedStyle to get the width of navbar — Mark Wilson
– Mark Wilson, Commented Oct 21, 2016 at 4:15

Mark Wilson · Accepted Answer · 2016-10-21 04:12:59Z

3

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>

answered Oct 21, 2016 at 4:12

Mark Wilson

1,3542 gold badges11 silver badges20 bronze badges

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

1 Comment

Mark Wilson Over a year ago

Glad that it helped. Have a great day

sms247 · Accepted Answer · 2016-11-07 03:57:42Z

1

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

edited Nov 7, 2016 at 3:57

answered Oct 21, 2016 at 4:16

sms247

4,5145 gold badges38 silver badges46 bronze badges

3 Comments

sms247 Over a year ago

that's great to hear that you achieved your goal, good luck for your remaining project

user6768630 Over a year ago

can you please tell me about changes need to be done even if we put getElementsByClassName instead of getElementById

sms247 Over a year ago

for this purpose you should add jquery and user .css() function which can get any property of element <script src="code.jquery.com/jquery-1.10.2.js"></script> <script type="text/javascript"> function displayWidth(){ alert($(".navbar").css('width')); //for class:.navbar id=#navbar } </script>

Nitheesh · Accepted Answer · 2016-10-21 04:13:00Z

1

You can find it by jQuery.

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

answered Oct 21, 2016 at 4:13

Nitheesh

20.1k3 gold badges28 silver badges52 bronze badges

1 Comment

user6768630 Over a year ago

sorry,i'm not using jquery i need an answer with java script

Shariq Ansari · Accepted Answer · 2016-10-21 04:37:02Z

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, 2016 at 4:37

Shariq Ansari

4,6911 gold badge30 silver badges32 bronze badges

Comments

Monasha · Accepted Answer · 2016-10-21 04:21:21Z

0

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>

edited Oct 21, 2016 at 4:21

user6768630

answered Oct 21, 2016 at 4:19

Monasha

7052 gold badges16 silver badges28 bronze badges

1 Comment

Monasha Over a year ago

yes, as the class navbar is getting replaced by navbar-after-click when the button is clicked

Collectives™ on Stack Overflow

How can I read a CSS property value using Javascript?

5 Answers 5

1 Comment

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related