How can I read a CSS property value using Javascript?


Tags: javascript,html,css,alert

Problem :

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?



Solution :

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


    CSS Howto..

    How to make JqueryUi Slider vertical-align middle?

    How to change the Img tag src through css only? [closed]

    How to make CSS visible only for Android phone UC browser

    How to add border to circular image on hover? css or jquery

    How to style the NSString using CSS?

    How to make the side bar active?

    In GWT, how to create a Style object and associate it with a Widget WITHOUT using a CSS file and WITHOUT UiBinder

    How to I make a button clickable with HTML/CSS? It needs to be centered along with a title over an image

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to fix layout to browser window without scroll

    How to scale image block using only css?

    How to achieve “paper-like” background effect? [closed]

    How (where) can i set fixed cell size in nested html tables, with css?

    How to Make Tabs In CSS?

    I can't figure out how to get display property to work when it comes to multiple div elements

    How to :hover one div on two other divs and make it dynamic with JS/JQuery?

    boostrap menu active page dont show style

    How do I control the height of the main content area no matter how much text is in there?

    webkit animation play state: how to start/stop animation on demand with javascript

    How to create three columns in css

    How can I change color of visited cgridview row?

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    How can i make an icon blink using CSS/javascript/jquery [duplicate]

    CSS parallax effect. How to change the top margin

    How to display a box of color beside a table row using CSS?

    How can I make responsive image take up 100% of its parent's height?

    How to remove CSS spaghetti in legacy web app?

    How to animate transitions triggered by links

    How can I get a box shadow to start below a thick border?

    How to include SASS files and CSS files into version repository and developement cycle