Getting the actual percentage value, not pixels for rule

A1ien51 · 04-16-2010, 09:25 PM

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

TinyScript · 04-16-2010, 11:47 PM

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>

mrhoo · 04-17-2010, 05:10 AM

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'

rnd me · 04-17-2010, 06:20 AM

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.

TinyScript · 04-17-2010, 07:28 AM

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>

A1ien51 · 04-19-2010, 03:14 AM

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