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 give reference to static resources like css,images,java script in JSP?

    how can i change the following cs into one CSS CLASS

    How do I code a close link to js accordion panels?

    How to only make a css element appear on one page?

    How to dynamically set and modify CSS in JavaScript?

    Is XSS possible via an @import, and if so how? Are there ways to protect against it?

    CSS Have a div which can fit 5 li per row how to make 6 go to new line

    “div” into an “a” is wrong. So, how can I do this? (HTML4, CSS2, crossbrowser)

    How to make my HTML suitable for Mobile View

    How do i divide my webpage into 3 columns with css, frameset in html makes up too many pages to handle, how can i do it in css?

    How do I implement a MailChimp API form embed?

    How do I make this sprite behave how I want?

    How to make a bullet list align with text in css?

    How to not change color of link on hover

    How to set a tooltip width dynamically?

    How to style a PHP generated label?

    How do I align text to the middle of an element with CSS in Twitter Bootstrap?

    Behavior/Styling Separation - How to use IDs, classes and custom attributes for CSS and JavaScript?

    How to open a bootstrap modal when checked a chec-box (when a tick is placed on a check box)

    How to make these scale right in CSS (block with horizontal and vertical attachés)

    How change the background colour of the kendo ui datepicker using css [duplicate]

    CSS: How to ignore an element so parent's padding will accomodate to other elements?

    How to get rid of duplicating image when applying own style to Radio/CheckButtons in GTK with CSS?

    How to Remove the Awkward Margin to the Left of my Unordered List?

    CSS - How to hide div by hovering another div [duplicate]

    How can I get IE7 to see an HTC file in the same directory as my CSS?

    ASP.NET MVC: How do other people apply conditional CSS classes?

    How to style a GtkLabel with CSS?

    How to prevent span tags overlapping each other?

    How can i make the picture zoom in with css when my picture is 100% width in a bootstrap column?