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 create a button with overlapping Ribbon Shape in CSS?

    How can I set up my menu to slide out, only when the header is hovered on?

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    Gradient css borders not showing in internet explorer an firefox

    How to restrict pasting text in an input text field in html

    How to reverse direction of moving div once it reaches side of screen?

    How to override default CSS file location in a Qml Webview?

    How to write special css for IE in external css file using css conditional comments [closed]

    CSS - How to stack divs by columns of 2

    How to create a global settings file in react css modules

    Canvas distorts drawing. How do I get the scale factor between the set size and the styled size?

    How to display parent form when input text is on focus?

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?

    How to give border a single border for two adjacent cells in css

    How To Style A Class Based On Unique ID?

    How to get two CSS rating star widgets to not affect each other when clicked

    how to apply css in angular.js

    how to include css and js files to php template?

    How to pass the output of CSS Selector to beautiful soup?

    How to hide classes on some pages in WordPress?

    How to change the Home icon in Primefaces Breadcrumb?

    How to set CSS3 transition using javascript?

    How can I list available Css Classes from my App_Themes folder?

    how to position heading in the center of the page

    How to make agile layout?

    How to Control Width of Title (H2) with CSS?

    How to solve position issue in ie7 using html and css?

    CSS, knockout.js : how to dynamically assign id to checkbox with foreach data-bind

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?