Can't get css property using JavaScript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • peterbz
    New Member
    • Jul 2008
    • 1
    #1

    Can't get css property using JavaScript

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

    Code:
    #content {
  width:50%;
  padding:0;
}

    And I have an index.html with this code:

    Code:
    <html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div id="content">
        	Hello world!
	</div>
	<script language="javascript" type="text/javascript">
		alert(document.getElementById("content").style.width);
	</script>

</body>
</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
    Code:
    <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!
    Tags: None
    • mrhoo
      Contributor
      • Jun 2006
      • 428
      #2
      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 javascriptPrope rty 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-
      Code:
      document.deepCss= function(who, css){
	var val= '', str= css.dasher(false);
	val= who.style[str];
	if(!val){
		if(who.currentStyle) val= who.currentStyle[str];
		else{
			var dv= document.defaultView || window;
			if(dv && dv.getComputedStyle){
				str= css.dasher(true);
				val= dv.getComputedStyle(who,'').getPropertyValue(css);
			}
		}
	}
	return val || '';
}
      Code:
      String.prototype.dasher=function(boo){
	var x= this;
	if(/^[A-Z]+$/.test(x) || /\-/.test(x)) x = x.toLowerCase();
	if(boo=== true ){
		if(/[a-z][A-Z]/.test(x)){
			x= x.replace(/[A-Z]/g, function(w){
				return '-' + w.toLowerCase();
			})
		}
	}
	else if(/\-/.test(x)){
		x= x.replace(/\-[a-z]/g, function(w){
			return w.charAt(1).toUpperCase() + w.substring(2);
		})
	}
	return x;
}
      var who=document.ge tElementById("c ontent");
      alert(document. deepCss(who,'wi dth'));

      of course, if you only want to find the displayed width of an element,
      you can read its offsetWidth property....

        Comment

        • rnd me
          Recognized Expert Contributor
          • Jun 2007
          • 427
          #3
          here is a function that allows the same way of refering to a css property in all browsers:

          Code:
          function getstyle(obj, cAttribute) {
    if (obj.currentStyle) {
        this.getstyle = function (obj, cAttribute) {return obj.currentStyle[cAttribute];};
    } else {
        this.getstyle = function (obj, cAttribute) {return document.defaultView.getComputedStyle(obj, null)[cAttribute];};
    }
    return getstyle(obj, cAttribute);
}
          change your script as shown below to see it in action:
          Code:
          //alert(document.getElementById("content").style.width);
alert(getstyle(document.getElementById("content"), "width" ));

            Comment

            Previous template Next
            Working...