By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,817 Members | 2,152 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,817 IT Pros & Developers. It's quick & easy.

Can't get css property using JavaScript

P: 1
Okay, I have a stylesheet called style.css with the following code:

Expand|Select|Wrap|Line Numbers
  1. #content {
  2.   width:50%;
  3.   padding:0;
  4. }

And I have an index.html with this code:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3.     <link href="style.css" rel="stylesheet" type="text/css" />
  4. </head>
  5. <body>
  6.     <div id="content">
  7.             Hello world!
  8.     </div>
  9.     <script language="javascript" type="text/javascript">
  10.         alert(document.getElementById("content").style.width);
  11.     </script>
  12.  
  13. </body>
  14. </html>

As you can see, I'm trying to get the width of the <DIV> with the ID "content". However, when I run the webpage, it only shows an empty message box, meaning that it can't seem to retrieve the css width value of the <DIV>

However, I tried actually declaring the width style on the index.html with
Expand|Select|Wrap|Line Numbers
  1. <div id="content" style="width:50%">
and it seems to work this way

However, I don't want to do this as I want all style definitions enclosed in my .css file.

Can someone please help? Thanks!
Jul 7 '08 #1
Share this Question
Share on Google+
2 Replies


100+
P: 428
You can access the css cascade in most browsers.
IE uses a different style model than the others.

For many style properties you'll need to switch between the hyphenated css-style and the camel case javascriptProperty formatting.

It is too much work for a one off single use-
for that, put the style in the html and use your one liner.

You can write a method to return any inherited css property of any element.

It will help to have a String method to handle the css and javascript formatting.

For example-
Expand|Select|Wrap|Line Numbers
  1. document.deepCss= function(who, css){
  2.     var val= '', str= css.dasher(false);
  3.     val= who.style[str];
  4.     if(!val){
  5.         if(who.currentStyle) val= who.currentStyle[str];
  6.         else{
  7.             var dv= document.defaultView || window;
  8.             if(dv && dv.getComputedStyle){
  9.                 str= css.dasher(true);
  10.                 val= dv.getComputedStyle(who,'').getPropertyValue(css);
  11.             }
  12.         }
  13.     }
  14.     return val || '';
  15. }
  16.  
Expand|Select|Wrap|Line Numbers
  1. String.prototype.dasher=function(boo){
  2.     var x= this;
  3.     if(/^[A-Z]+$/.test(x) || /\-/.test(x)) x = x.toLowerCase();
  4.     if(boo=== true ){
  5.         if(/[a-z][A-Z]/.test(x)){
  6.             x= x.replace(/[A-Z]/g, function(w){
  7.                 return '-' + w.toLowerCase();
  8.             })
  9.         }
  10.     }
  11.     else if(/\-/.test(x)){
  12.         x= x.replace(/\-[a-z]/g, function(w){
  13.             return w.charAt(1).toUpperCase() + w.substring(2);
  14.         })
  15.     }
  16.     return x;
  17. }
var who=document.getElementById("content");
alert(document.deepCss(who,'width'));


of course, if you only want to find the displayed width of an element,
you can read its offsetWidth property....
Jul 7 '08 #2

rnd me
Expert 100+
P: 427
here is a function that allows the same way of refering to a css property in all browsers:

Expand|Select|Wrap|Line Numbers
  1. function getstyle(obj, cAttribute) {
  2.     if (obj.currentStyle) {
  3.         this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
  4.     } else {
  5.         this.getstyle = function (obj, cAttribute) {return document.defaultView.getComputedStyle(obj, null)[cAttribute];};
  6.     }
  7.     return getstyle(obj, cAttribute);
  8. }
  9.  
  10.  
change your script as shown below to see it in action:
Expand|Select|Wrap|Line Numbers
  1. //alert(document.getElementById("content").style.width);
  2. alert(getstyle(document.getElementById("content"), "width" ));
  3.  
Jul 7 '08 #3

Post your reply

Sign in to post your reply or Sign up for a free account.