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.styleSheets
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.styleSheets[i].rules[i].style.width
Netscape
document.styleSheets[i].cssRules[i].style.width
Here is an example:
<html>
<head>
<title>reading out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getStyleObject (styleSheetIndex, ruleIndex) {
if (document.styleSheets) {
var styleSheet = document.styleSheets[styleSheetIndex];
if (styleSheet) {
var rule;
if (styleSheet.cssRules) {
rule = styleSheet.cssRules[ruleIndex];
}
else if (styleSheet.rules) {
rule = styleSheet.rules[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.height: ' + style.height);
}
else {
alert('style not found.');
}
}
</script>
</head>
<body onload="testStyleSheet();">
<div id="aDiv">
<p>
Test.
</p>
</div>
</body>
</html>
Note that even Opera 7 doesn't support document.styleSheets. 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>reading out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getStyleObjectFromSelector (selectorText) {
if (document.styleSheets) {
for (var i = document.styleSheets.length - 1; i >= 0; i--) {
var styleSheet = document.styleSheets[i];
var rules;
if (styleSheet.cssRules) {
rules = styleSheet.cssRules;
}
else if (styleSheet.rules) {
rules = styleSheet.rules;
}
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.length; i++) {
var selector = selectors[i];
var style = getStyleObjectFromSelector(selector);
if (style) {
alert('Selector ' + selector + ': style.height: ' + style.height);
}
else {
alert('No rule found for selector ' + selector);
}
}
}
</script>
</head>
<body onload="testStyleSheet();">
<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, getComputedStyle allows
that with Mozilla and with Opera 7 and element.currentStyle with IE5+:
<html>
<head>
<title>reading out stylesheet information</title>
<style type="text/css">
#aDiv {
color: darkgreen;
background-color: lightgreen;
height: 200px;
}
</style>
<script type="text/javascript">
function getComputedStyleForElement (element, cssPropertyName) {
if (element) {
if (window.getComputedStyle) {
return window.getComputedStyle(element,
'').getPropertyValue(cssPropertyName.replace(/([A-Z])/g,
"-$1").toLowerCase());
}
else if (element.currentStyle) {
return element.currentStyle[cssPropertyName];
}
else {
return null;
}
}
else {
return null;
}
}
function getComputedStyleForId (elementId, cssPropertyName) {
if (document.getElementById) {
return
getComputedStyleForElement(document.getElementById (elementId),
cssPropertyName);
}
else {
return null;
}
}
function testComputedStyle () {
var ids = ['aDiv', 'aP'];
for (var i = 0; i < ids.length; i++) {
var cssValue = getComputedStyleForId(ids[i], 'backgroundColor');
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="testComputedStyle();">
<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/ 
