Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts

    Question Getting the actual percentage value, not pixels for rule

    Is there a way with Firefox/Chrome to get the actual % used instead of the rendered pixel values?

    For example I have a table with the following CSS markup
    Code:
    #tableFoo : { width : 50%; }

    In IE to get the percentage set in the CSS file, it is as simple as:

    Code:
    var width = tableObj.currentStyle["width"]
    I am having trouble figuring out a way to get the percentage value with Firefox and Chrome. I am thinking it is not possible other than stylesheet sniffing and ripping out the rules that way which I am not going to do.

    Thanks,
    Eric
    Last edited by A1ien51; 04-16-2010 at 09:58 PM.
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    the only way i could get it was if the style declaration was in the tag

    Code:
    <html><head>
    <style>
    #div{}
    
    </style>
    
    <script>
    window.onload=function(){
    var E = document.getElementById("div")
    E.onmouseover=function(){alert(this.style.width)}
    }
    </script>
    </head>
    <body>
    
    <div id="div"  style="width:50%;background-color:#ff0000"><p>Hello</p></div>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    727
    Thanks
    35
    Thanked 132 Times in 123 Posts
    Code:
    document.percentWidth= function(who){
    	var percent, pa= who.offsetParent,
    	w1= pa.offsetWidth, w2= who.offsetWidth;
    	percent= 100*(w2/w1);
    	return percent.toFixed(2)+ "%";
    }
    This method will only work if the element is in the document tree, and not set to style.display='none'

  • Users who have thanked mrhoo for this post:

    TinyScript (04-17-2010)

  • #4
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,299
    Thanks
    10
    Thanked 585 Times in 566 Posts
    i don't like iterating though stylesheets either, but this function seems to be working.
    since i don't like doing it, i took several steps to mitigate performance problems:

    • all rules are cached when the builder is parsed
    • @import styles don't get tested
    • rules are flattened and reversed so that the first hit wins
    • only elements with a defined class or id are sought
    • only rules ending with these types of css selectors are tested



    if a partial match is found via the class or id, the selector's finality is tested by matching the selector with the element.

    the first selector- element match is assumed to be the most recent, and it's style property is returned immediately.


    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>
    	<title>css values?</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type='text/css'>
    	#table1, #table2  { width : 50%; } 
    </style>	
    </head>
    <body>
    <div id='cont'>
    	
      
      <table border='1' cellspacing='1' cellpadding='1' id="table1" >
    	<tr>
    		<th>aaa</th>
    		<th>bbb</th>
    	</tr>
    	<tr>
    		<td>ggg</td>
    		<td>vvv</td>
    	</tr>
    </table>	
    
    </div>	
    
    
    <script type='text/javascript'>
    
    
    var getElementDefinedStyle=(function gs(){
        function R(c){return [].slice.call(c);}
      var sheets=R(document.styleSheets),
        sels={},
        r=[];
        sheets.map(function(a){  
            r.splice.apply(r, [r.length, 0].concat(R(a.cssRules)));
        });
        r.reverse();
    
    
      return function getElementDefinedStyle(elm, prop){
       var rx=new RegExp( "(#"+elm.id+"(,|$))|(\\."+elm.className+"(,|$))" ,"i"), out="";
        r.some(function(a){  
           if(a.selectorText.match(rx) && document.querySelectorAll(a.selectorText)[0]==elm){
    	  return out=a.style[prop];
    	}
        });
    
     return out;
    };
    
    
    }());//end builder wrap
    
    
    
    window.onload= function (){
    	alert(	
    		getElementDefinedStyle(
    			document.getElementById("table1"), "width"
    		)
    	);
    };
    </script>
    </body>
    </html>
    tested firefox 3.6


    if you find something better, let me know.
    Last edited by rnd me; 04-17-2010 at 06:29 AM.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    A1ien51 (04-19-2010)

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    I thought the other one worked pretty good, but I didn't understand the need for making it part of the document object. It works perfectly if you remove the margin of 20 px for internet explorer. I made a test with his function.

    Code:
    <html><head>
    <style>
    
    #div {width:50%;background-color:#ff0000;}
    
    </style>
    
    <script>
    
    percentWidth= function(who){
    var IEfudge = !window.addEventListener ? 20 : 0;
    	var percent, pa= who.offsetParent,
    	w1= pa.offsetWidth, w2= who.offsetWidth + IEfudge;
    	percent= 100*(w2/w1);
    	return percent.toFixed(2)+ "%";
    }
    
    
    
    
    
    
    window.onload=function(){
    var E = document.getElementById("div")
    E.onmouseover=function(){this.innerHTML="Hello  percent width = "+percentWidth(this);this.onmouseout=function(){this.innerHTML="Hello"}}
    }
    </script>
    </head>
    <body>
    
    <div id="div"  ><p>Hello</p></div>
    </body>
    </html>

  • #6
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    Problem with MrHoo's solution is I have no clue if the developer assigns a percentage, ems, or px. It is a guessing game.

    rnd me ran with the idea I had, I wanted to avoid it since I did not want to have to write the rules of CSS. I like what you did.

    What I think I am going to do: My widget is going to assume ems, if it is different, the developer has to set a config in my widget. It sucks, but they should be using ems on our site anyway. lol

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]


  •  

    Tags for this Thread

    Posting Permissions

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