Access CSS with JavaScript

**Martin Honnen** · Jul 20 '05, 12:35 PM

Re: Access CSS with JavaScript

George Hester wrote:
[color=blue]
> 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>[/color]

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

Attention Required! | Cloudflare

http://JavaScript.FAQTs.com/

**George Hester** · Jul 20 '05, 12:35 PM

Re: Access CSS with JavaScript

Oh Martin thanks for that.

--
George Hester
_______________ _______________ ____
"Martin Honnen" <mahotrash@yaho o.de> wrote in message news:3fd1c24d$1 @olaf.komtel.ne t...[color=blue]
>
>
> George Hester wrote:
> [color=green]
> > 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>[/color]
>
> 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/
>[/color]

**George Hester** · Jul 20 '05, 12:35 PM

Re: Access CSS with JavaScript

Hello again Matin. I tried the ComputedStyle one you gave. After fixing for line continuation issues in my newsreader I am getting undefined for both alerts. Is there something wrong with it? Here is what you had and what I put it to that is removing the line continuation issues.

<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,'').getProper tyValue(cssProp ertyName.replac e(/([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>

--
George Hester
_______________ _______________ ____
"Martin Honnen" <mahotrash@yaho o.de> wrote in message news:3fd1c24d$1 @olaf.komtel.ne t...[color=blue]
>
>
> George Hester wrote:
> [color=green]
> > 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>[/color]
>
> 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/
>[/color]

**George Hester** · Jul 20 '05, 12:35 PM

Re: Access CSS with JavaScript

Oh I got it never mind it was anothe line continuation issue.

--
George Hester
_______________ _______________ ____
"George Hester" <hesterloli@hot mail.com> wrote in message news:tauAb.1730 71$ji3.91494@tw ister.nyroc.rr. com...
Hello again Matin. I tried the ComputedStyle one you gave. After fixing for line continuation issues in my newsreader I am getting undefined for both alerts. Is there something wrong with it? Here is what you had and what I put it to that is removing the line continuation issues.

<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,'').getProper tyValue(cssProp ertyName.replac e(/([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>

--
George Hester
_______________ _______________ ____
"Martin Honnen" <mahotrash@yaho o.de> wrote in message news:3fd1c24d$1 @olaf.komtel.ne t...[color=blue]
>
>
> George Hester wrote:
> [color=green]
> > 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>[/color]
>
> 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/
>[/color]

**Dr John Stockton** · Jul 20 '05, 12:36 PM

Re: Access CSS with JavaScript

JRS: In article <zCpAb.186022$1 N3.40094@twiste r.nyroc.rr.com> , seen in
news:comp.lang. javascript, George Hester <hesterloli@hot mail.com> posted
at Sat, 6 Dec 2003 18:55:27 :-
[color=blue]
>Lines: 256[/color]
[color=blue]
>
>Oh Martin thanks for that.
>
>--
>George Hester
>______________ _______________ _____
>"Martin Honnen" <mahotrash@yaho o.de> wrote in message news:3fd1c24d$1 @olaf.komte
>l.net...[color=green]
>>
>>
>> George Hester wrote:
>>[color=darkred]
>> > I have a css file this is a portion of it:
>> > ...[/color][/color][/color]

*Plonk*. See FTI28, and c.l.j FAQ.

--
© John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

**George Hester** · Jul 20 '05, 12:36 PM

Re: Access CSS with JavaScript

What's your problem? Do you just hate helpful people or do you just hate in general?

--
George Hester
_______________ _______________ ____
"Dr John Stockton" <spam@merlyn.de mon.co.uk> wrote in message news:u$hHDKK$80 0$Ewjd@merlyn.d emon.co.uk...[color=blue]
> JRS: In article <zCpAb.186022$1 N3.40094@twiste r.nyroc.rr.com> , seen in
> news:comp.lang. javascript, George Hester <hesterloli@hot mail.com> posted
> at Sat, 6 Dec 2003 18:55:27 :-
> [color=green]
> >Lines: 256[/color]
> [color=green]
> >
> >Oh Martin thanks for that.
> >
> >--
> >George Hester
> >______________ _______________ _____
> >"Martin Honnen" <mahotrash@yaho o.de> wrote in message news:3fd1c24d$1 @olaf.komte
> >l.net...[color=darkred]
> >>
> >>
> >> George Hester wrote:
> >>
> >> > I have a css file this is a portion of it:
> >> > ...[/color][/color]
>
> *Plonk*. See FTI28, and c.l.j FAQ.
>
> --
> © John Stockton, Surrey, UK. ?@merlyn.demon. co.uk Turnpike v4.00 MIME ©
> Web <URL:http://www.uwasa.fi/~ts/http/tsfaq.html> -> Timo Salmi: Usenet Q&A.
> Web <URL:http://www.merlyn.demo n.co.uk/news-use.htm> : about usage of News.
> No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.[/color]

**Fabian** · Jul 20 '05, 12:36 PM

Re: Access CSS with JavaScript

George Hester hu kiteb:
[color=blue]
> What's your problem? Do you just hate helpful people or do you just
> hate in general?[/color]

I think his point is that requoting an extremely long post IN FULL just
to add a simple thank you is a waste of bandwidth. Most people here tend
to agree with that sentiment.

--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk

**George Hester** · Jul 20 '05, 12:36 PM

Re: Access CSS with JavaScript

6KB more then yours 2KB!!!. How much bandwidth did that run the Doctor? Funny place but I hear you will try to be more considerate in the future. Can't have too many six-pence spent needlessly now can we?

--
George Hester
_______________ _______________ ____
"Fabian" <lajzar@hotmail .com> wrote in message news:br08rr$26g nhf$1@ID-174912.news.uni-berlin.de...[color=blue]
> George Hester hu kiteb:
> [color=green]
> > What's your problem? Do you just hate helpful people or do you just
> > hate in general?[/color]
>
> I think his point is that requoting an extremely long post IN FULL just
> to add a simple thank you is a waste of bandwidth. Most people here tend
> to agree with that sentiment.
>
>
> --
> --
> Fabian
> Visit my website often and for long periods!
> http://www.lajzar.co.uk
>[/color]

**Thomas 'PointedEars' Lahn** · Jul 20 '05, 12:40 PM

Re: Access CSS with JavaScript

George Hester wrote:
[color=blue]
> 6KB more then yours 2KB!!!.[/color]

Your `!' key is borken.

Well, it sums up *and* it multiplies with every top-posting person.
[color=blue]
> [TOFU: Text Over, Fullquote Under / Top post][/color]

*PLONK*

PointedEars

**tim arthur** · Jul 23 '05, 10:39 AM

Re: Access CSS with JavaScript

This works well if my stylesheet is inline or from a local file. But if
try to import a sheet where href="http://remote_server/...." then I
can't seem to access the rules for the stylesheet. I can see the
stylesheet in the StyleSheets object, but the rules collection is not
accessible. Any thoughts?

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!

**Michael Winter** · Jul 23 '05, 10:40 AM

Re: Access CSS with JavaScript

On 03 May 2004 01:07:02 GMT, tim arthur <timm@msn.com > wrote:
[color=blue]
> This works well if my stylesheet is inline or from a local file. But if
> try to import a sheet where href="http://remote_server/...." then I
> can't seem to access the rules for the stylesheet. I can see the
> stylesheet in the StyleSheets object, but the rules collection is not
> accessible.[/color]

To whom and to what are you responding? ALWAYS quote material that shows
the context of your post.
[color=blue]
> Any thoughts?[/color]

A URL to an example would be nice.

Mike

--
Michael Winter
M.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

Access CSS with JavaScript

Access CSS with JavaScript

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment