www.webdeveloper.com
Results 1 to 4 of 4

Thread: How to read CSS properties with JavaScript

  1. #1
    Join Date
    May 2003
    Location
    Bulgaria
    Posts
    149

    How to read CSS properties with JavaScript

    In the example below it appears JavaScript can't read a style property if it's not specifically defined with JavaScript before, ie you can't get a value in this way:
    var testboxWidth = document.getElementById("testbox").style.width;
    before defining it previously like this:
    document.getElementById("testbox").style.width = "200px";

    Is there a way to read such style properties directly?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My Box Dimensions Experiment</title>
    <style type="text/css">
    <!--
    #testbox {
    	font-family: Verdana, Geneva, sans-serif;
    	margin: 10px;
    	padding: 5px;
    	height: 350px;
    	width: 200px;
    	border: 3px solid #09F;
    	background-color: #FF6;
    	font-size: 12px;
    	text-align: justify;
    	overflow: scroll;
    	position: absolute;
    	top: 20px;
    	left: 20px;
    }
    #testbox2 {
    	font-family: Verdana, Geneva, sans-serif;
    	margin: 10px;
    	padding: 5px;
    	height: 350px;
    	width: 200px;
    	border: 3px solid #09F;
    	background-color: #FF6;
    	font-size: 12px;
    	text-align: justify;
    	overflow: auto;
    	position: absolute;
    	top: 20px;
    	left: 250px;
    }
    #testbox3 {
    	font-family: Verdana, Geneva, sans-serif;
    	margin: 10px;
    	padding: 5px;
    	height: 350px;
    	width: 200px;
    	border: 3px solid #09F;
    	font-size: 12px;
    	text-align: justify;
    	overflow: auto;
    	position: absolute;
    	top: 20px;
    	left: 480px;
    	-ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#000000, strength=10)";
    filter: progid:DXImageTransform.Microsoft.Glow(color=#000000, strength=10);
    	color: #9CF;
    }
    #testbox4 {
    	font-family: Verdana, Geneva, sans-serif;
    	margin: 10px;
    	padding: 5px;
    	height: 350px;
    	width: 200px;
    	border: 3px solid #09F;
    	background-color: #FF6;
    	font-size: 12px;
    	text-align: justify;
    	overflow: auto;
    	position: absolute;
    	top: 20px;
    	left: 710px;
    }
    .boldtext {
    	font-family: Verdana, Geneva, sans-serif;
    	font-size: 12px;
    	font-weight: bold;
    	text-transform: capitalize;
    }
    #statusbar {
    	position:absolute;
    	width:889px;
    	left: 20px;
    	top: 425px;
    	border-top-style: outset;
    	border-right-style: outset;
    	border-bottom-style: outset;
    	border-left-style: outset;
    	margin: 10px;
    	background-color: #C0C0A0;
    	border-top-color: #39F;
    	border-right-color: #39F;
    	border-bottom-color: #39F;
    	border-left-color: #39F;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 12px;
    	padding: 5px;
    	overflow: auto;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function startCalculation(){
    document.getElementById("testbox").style.width = "200px";
    measureDiv(document.getElementById("testbox"));
    measureDiv(document.getElementById("testbox2"));
    measureDiv(document.getElementById("testbox3"));
    measureDiv(document.getElementById("testbox4"));
    }
    
    function measureDiv(obj) {
    var sbContents = "";
    sbContents += '<p><span class="boldtext">' + obj.id + '</span><br />';
    sbContents += 'clientWidth = ' + obj.clientWidth + '; ';
    sbContents += 'clientHeight = ' + obj.clientHeight + '; ';
    sbContents += 'offsetWidth = ' + obj.offsetWidth + '; ';
    sbContents += 'offsetHeight = ' + obj.offsetHeight + '; ';
    sbContents += 'scrollWidth = ' + obj.scrollWidth + '; ';
    sbContents += 'scrollHeight = ' + obj.scrollHeight + '; ';
    ///*
    sbContents += 'style.width = ' + obj.style.width + '; ';
    sbContents += 'style.height = ' + obj.style.height + '; ';
    //*/
    sbContents += 'padding = ' + obj.style.padding + '; ';
    sbContents += 'border = ' + obj.style.border + '; ';
    sbContents += 'margin = ' + obj.style.margin + '.</p>';
    document.getElementById("statusbar").innerHTML += sbContents;
    document.getElementById("statusbar").style.height = document.getElementById("statusbar").scrollHeight + "px";
    }
    //-->
    </script>
    </head>
    
    <body onload="startCalculation()">
    <div id="testbox"><span class="boldtext">testbox. Scroll = on</span><br />height: 350px; width: 200px; border: 3px; margin: 10px;	padding: 5px<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
    <div id="testbox2"><span class="boldtext">testbox2. Normal</span><br />
      height: 350px; width: 200px; border: 3px; margin: 10px;	padding: 5px<br />
    Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
    <div id="testbox3"><span class="boldtext">testbox3. Shadow Filter</span><br />
    height: 350px; width: 200px; border: 3px; margin: 10px;	padding: 5px; Glow (color = #000000, strength = 10)<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
    <div id="testbox4"><span class="boldtext">testbox4. Text overflows</span><br />
    height: 350px; width: 200px; border: 3px; margin: 10px;	padding: 5px<br />Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics. Some films of relevant ancient settings, such as Sebastiane and The Passion of the Christ, have been made with dialogue in Latin for purposes of realism. Occasionally, Latin dialogue is used because of its association with religion or philosophy, in such film/TV series as the Exorcist and Lost (Jughead). Subtitles are usually employed for the benefit of audiences who do not understand Latin. There are also songs written with Latin lyrics.</div>
    <div id="statusbar"></div>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #statusbar {
    	position:absolute;
    	width:889px;
    	left: 20px;
    	top: 425px;
    	border-top-style: outset;
    	border-right-style: outset;
    	border-bottom-style: outset;
    	border-left-style: outset;
    	margin: 10px;
    	background-color: #C0C0A0;
    	border-top-color: #39F;
    	border-right-color: #39F;
    	border-bottom-color: #39F;
    	border-left-color: #39F;
    	font-family: Tahoma, Geneva, sans-serif;
    	font-size: 12px;
    	padding: 5px;
    	overflow: auto;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="statusbar" ></div>
    <script type="text/javascript">
    /*<![CDATA[*/
    function zxcSV(obj,par){
     if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
     return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
    }
    
    
    
    var obj=document.getElementById('statusbar');
    alert(zxcSV(obj,'background-Color'));
    alert(zxcSV(obj,'font-Family'));
    alert(zxcSV(obj,'width'));
    
    /*]]>*/
    </script></body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    This code displays the style value for an element that is set in the css.

    It works in IE8 and Opera - not sure about other browsers.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    title></title>

    <
    style type="text/css">
    <!--

    #div1 {
    width200px;
    height150px;
    background-colorred}

    -->
    </
    style>

    <
    script type="text/javascript">
    <!--

    function 
    getStyle(elemId,styleAtt)   {
          var 
    value;
          var 
    elem document.getElementById(elemId);
          if (
    elem.currentStyle) {
                
    value elem.currentStyle[styleAtt];
          } else if (
    window.getComputedStyle)  {
                
    value document.defaultView.getComputedStyle(elemId,null).getPropertyValue(styleAtt);
          }
          
    alert('width = '+value);
    }

    //-->
    </script>

    </head>
    <body>
      
    <div id="div1" onclick="getStyle(this.id,'width')"></div>

    <p>Click the div to see its style width</p>  

    </body>
    </html> 
    Last edited by tirna; 04-06-2010 at 06:38 AM.

  4. #4
    Join Date
    May 2003
    Location
    Bulgaria
    Posts
    149
    Thank you Vic and tirna for your promt answers!
    So the style properties are acessed via the

    document.defaultView.getComputedStyle() method.

    Tirna, from what I have referenced, it said:
    ""Not supported in IE, which uses the "currentStyle" property instead.""
    Perhaps what is meant is by older IE versions?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles