George Hester wrote:
I have a css file this is a portion of it:
/* trackaccept.css */ div.track { width:400px; height: 100px; }
I have this in my ASP page:
<link rel="stylesheet " type="text/css"
href="/includes/trackaccept.css "/>
I need to read the values for width and height in my page. How do I
acess those values using JavaScipt? Thanks.
I have a length of 2 for CSS objects so I don't know whether it is 0
or 1 I'm assuming 0.since I don't have any other external CSS
statements. The other is declared in the page as <style></style>
Whether you have
<link rel="stylesheet "
or
<style type="text/css">
doesn't matter, browsers like IE4+ or Netscape 6+ and Mozilla support a
document.styleS heets
collection where each sheet appears.
You can access the CSS rules in the stylesheets and read and change
value of properties in a rule, unfortunately different in IE and
Netscape. IE has
document.styleS heets[i].rules[i].style.width
Netscape
document.styleS heets[i].cssRules[i].style.width
Here is an example:
<html>
<head>
<title>readin g out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getStyleObject (styleSheetInde x, ruleIndex) {
if (document.style Sheets) {
var styleSheet = document.styleS heets[styleSheetIndex];
if (styleSheet) {
var rule;
if (styleSheet.css Rules) {
rule = styleSheet.cssR ules[ruleIndex];
}
else if (styleSheet.rul es) {
rule = styleSheet.rule s[ruleIndex];
}
if (rule && rule.style) {
return rule.style;
}
else {
return null;
}
}
else {
return null;
}
}
else {
return null;
}
}
function testStyleSheet () {
var style = getStyleObject( 0, 0);
if (style) {
alert('style.he ight: ' + style.height);
}
else {
alert('style not found.');
}
}
</script>
</head>
<body onload="testSty leSheet();">
<div id="aDiv">
<p>
Test.
</p>
</div>
</body>
</html>
Note that even Opera 7 doesn't support document.styleS heets. And I don't
know about Safari or Konqueror support, does anyone else care to check
and contribute?
Of course with external style sheets make sure you use <body onload
before trying to access them.
You can also check the selector of a rule with selectorText:
<html>
<head>
<title>readin g out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getStyleObjectF romSelector (selectorText) {
if (document.style Sheets) {
for (var i = document.styleS heets.length - 1; i >= 0; i--) {
var styleSheet = document.styleS heets[i];
var rules;
if (styleSheet.css Rules) {
rules = styleSheet.cssR ules;
}
else if (styleSheet.rul es) {
rules = styleSheet.rule s;
}
if (rules) {
for (var j = rules.length - 1; j >= 0; j--) {
if (rules[j].selectorText == selectorText) {
return rules[j].style;
}
}
}
}
return null;
}
else {
return null;
}
}
function testStyleSheet () {
var selectors = ['#aDiv', '.someClass'];
for (var i = 0; i < selectors.lengt h; i++) {
var selector = selectors[i];
var style = getStyleObjectF romSelector(sel ector);
if (style) {
alert('Selector ' + selector + ': style.height: ' + style.height);
}
else {
alert('No rule found for selector ' + selector);
}
}
}
</script>
</head>
<body onload="testSty leSheet();">
<div id="aDiv">
<p>
Test.
</p>
</div>
</body>
</html>
Of course if you are looking for the computed style of an object there
is no need to read through style sheet rules, getComputedStyl e allows
that with Mozilla and with Opera 7 and element.current Style with IE5+:
<html>
<head>
<title>readin g out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getComputedStyl eForElement (element, cssPropertyName ) {
if (element) {
if (window.getComp utedStyle) {
return window.getCompu tedStyle(elemen t,
'').getProperty Value(cssProper tyName.replace(/([A-Z])/g,
"-$1").toLowerCas e());
}
else if (element.curren tStyle) {
return element.current Style[cssPropertyName];
}
else {
return null;
}
}
else {
return null;
}
}
function getComputedStyl eForId (elementId, cssPropertyName ) {
if (document.getEl ementById) {
return
getComputedStyl eForElement(doc ument.getElemen tById(elementId ),
cssPropertyName );
}
else {
return null;
}
}
function testComputedSty le () {
var ids = ['aDiv', 'aP'];
for (var i = 0; i < ids.length; i++) {
var cssValue = getComputedStyl eForId(ids[i], 'backgroundColo r');
if (cssValue === null) {
alert('Style background-color for id ' + ids[i] + ' not found.');
}
else {
alert('Computed style for background-color for id ' + ids[i] + '
is ' + cssValue);
}
}
}
</script>
</head>
<body onload="testCom putedStyle();">
<div id="aDiv">
<p>
Test.
</p>
</div>
</body>
</html>
Watch out for Netscape 7 and Opera 7 normalizing CSS values, for
instance color values are returned as rgb(r, g, b).
--
Martin Honnen
http://JavaScript.FAQTs.com/ 
