To get the cascaded styles that's set in a style sheet you can use MSIE's proprietary currentStyle (also supported by Opera, it seems):
CODE
<style type="text/css" media="screen">
div {
position: absolute;
bottom: 10px;
}
#foo {bottom: 50px;}
</style>
<div id="foo" onclick="alert(this.currentStyle.bottom)">Foo</div>
(In the above example, the 50px value in #foo overrides the 10px in DIV.)
There's also a function called getStyles() on
http://www.quirksmode.org/dom/getstyles.html that seems to work in Safari as well, but Firefox returns a very strange value for "bottom" (-750px or so for me).
If the style sheet is simple you might loop through the rules until you find the matching selector, and hope that the computed style doesn't differ. Here's a modified example from
http://www.javascriptkit.com/dhtmltutors/externalcss3.shtml :
CODE
<style type="text/css" media="screen">
body {color: #000;}
#foo {
position: absolute;
bottom: 10px;
}
div {bottom: 50px !important;}
</style>
<script type="text/javascript">
function get_property(selector)
{
var mysheet=document.styleSheets[0];
var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;
for (i=0; i<myrules.length; i++)
{
if(myrules[i].selectorText.toLowerCase()==selector)
{
alert(myrules[i].style.bottom);
break;
}
}
}
</script>
<div id="foo" onclick="get_property('#'+this.id);">Foo</div>
Note that this only returns what's written in the style sheet for that rule, not the cascaded style applied to the element. For example, in the style sheet above the last DIV rule overrides #foo's rule above it (due to the !important declaration), but the script still alerts #foo's value of 'bottom', not DIV's.
FWIW & IIRC, some editors add BOMs when you specify UTF-8 charsets. 