Forum Moderators: open
In IE you use the currentStyle property to get the CSS value. For a table row for instance and I believe also things like margins and DIV widths, if you don't define anything it normally returns "auto".
In FF you use getComputedStyle...etc...etc... but it doesn't return "auto" it returns the actual pixel size of the thing onscreen. This is causing me a problem.
Any idea how to get "auto" or even null from Firefox?
I know there's a cssQuery library but it's the wrong way around for me. It gets elements based on CSS rules, what I want is the CSS rule for the element. I could reverse engineer the code but it's not an idea solution anyway.
Copy & Paste this demo for an example, run it in IE and FF to see what I mean. You can keep my getProp function. ;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Broken</title>
<style>
HTML, BODY { height: 100%; }
TABLE { width: 100px; height: 100%; }
TD { text-align: center; }
.one { background: lightblue; }
.three { background: pink; }
</style>
<script>function uppercaseThis( str) { return str.toUpperCase(); }
function getProp( obj, prop) {
var str;if( navigator.appVersion.indexOf( "MSIE")!= -1) { // Camel case for IE
prop = prop.replace( /-(.)/g, uppercaseThis);
prop = prop.replace( /(-)/g, "");
}if( obj.currentStyle)
str = obj.currentStyle[ prop];else if( window.getComputedStyle)
str = window.getComputedStyle( obj, null).getPropertyValue( prop);return str;
}function tellMeThings() {
var trs = document.getElementsByTagName( "TR");
alert( getProp( trs[1], "height"));
}</script>
</head><body>
<table id='test'>
<tr class='one'><td>Foo</td></tr>
<tr class='two'><td><a href='javascript:tellMeThings();'>Click here to see height of this row</a></td></tr>
<tr class='three'><td>Bar</td></tr>
</table>
</body></html>
I'll try and look around for it when I get the chance, but I'm kinda swamped at the moment...
