Changing CSS 2.1 descendant selectors

Changing CSS 2.1 descendant selectors

Post by Andrew Pou » Thu, 03 Feb 2005 20:20:06


If I have an external stylesheet that is @imported into my page and it
has an element that looks like this:

* html td {
font-style: italic;
}

how can I use javascript to change the font style to 'normal'?

Andrew Poulos
 
 
 

Changing CSS 2.1 descendant selectors

Post by Martin Hon » Thu, 03 Feb 2005 21:50:39


Pretty odd selector, * html needs an element as the ancestor of <html>
which should never be the case in a HTML document. Is that a CSS hack
for a particular browser doing goofy stuff which the selector?


IE has its own object model to access stylesheets, see
< http://www.yqcomputer.com/ ;
< http://www.yqcomputer.com/ ;

Mozilla implements (parts of) the W3C DOM Level 2 for CSS stylesheets as
documented here:
< http://www.yqcomputer.com/ ;
< http://www.yqcomputer.com/ #StyleSheets-StyleSheet-DocumentStyle>
< http://www.yqcomputer.com/ #StyleSheets-StyleSheet>
< http://www.yqcomputer.com/ #CSS-CSSStyleSheet>
< http://www.yqcomputer.com/ #CSS-CSSImportRule>
So with Mozilla you can walk document.styleSheets (for the <link> and
<style> embedded sheets), in document.styleSheets[index] you can walk
the cssRules collection and need to find an import rule and then that
has a styleSheet property which again has a cssRules collection where
you need to look for the rule with the selectorText.
I am not sure whether I have ever tried to script a rule in an imported
sheet so I can't currently say without testing whether Mozilla makes
imported stylesheets available.

I know that Opera 7 (and current 8.0 beta) do not provide script access
to stylesheets. Not sure how far latest Safari or Konqueror are with
document.styleSheets etc. maybe someone else can say.

--

Martin Honnen
http://www.yqcomputer.com/

 
 
 

Changing CSS 2.1 descendant selectors

Post by Dietmar Me » Thu, 03 Feb 2005 22:02:00


It does. Here's a quick hack, roughly tested with Mozilla and MSIE:

function modifyCSSRule(sSel, sAtt, vVal) {
var oSheets,
i,
oMSIEImpSheet,
j,
rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleSheets))
for (i=0; i<oSheets.length; i++) {
modifySheet(oSheets[i], rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheets[i].imports))
for (j=0; j<oMSIEImpSheet.length; j++)
modifySheet(oMSIEImpSheet[j], rSel, sAtt, vVal);
}
}

function modifySheet(oSheet, rSel, sAtt, vVal) {
var oRules,
j,
sText,
oMozImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules))
for (j=0; j<oRules.length; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sText))
return !(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMozImpSheet, rSel, sAtt, vVal);
}


For the OP, assumed that the correct rule is

html td {
font-style: italic;
}

(without an ancestor of HTML), the call should read

modifyCSSRule('html td', 'fontStyle', 'normal')

ciao, dhgm
 
 
 

Changing CSS 2.1 descendant selectors

Post by Michael Wi » Thu, 03 Feb 2005 22:19:49


[snip]


It's an IE hack. For some reason, IE doesn't believe that HTML is the
root element for HTML documents.


I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element? I
haven't got around to reinstalling Opera yet after my hard disk
trashed itself.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
 
 
 

Changing CSS 2.1 descendant selectors

Post by Dietmar Me » Thu, 03 Feb 2005 22:33:45


Did some corrections:

function modifyCSSRule(sSel, sAtt, vVal) {
var oSheets, i, j, rSel = new RegExp("^" + sSel + "$", "i");
if ((oSheets = document.styleSheets))
for (i=0; i<oSheets.length; i++) {
modifySheet(oSheets[i], rSel, sAtt, vVal);
}
}

function modifySheet(oSheet, rSel, sAtt, vVal) {
var oRules, j, sText, oMozImpSheet, oMSIEImpSheet;
if ((oRules = oSheet.rules || oSheet.cssRules))
for (j=0; j<oRules.length; j++)
if ((sText = oRules[j].selectorText)) {
if (rSel.test(sText))
(oRules[j].style[sAtt] = vVal);
}
else if ((oMozImpSheet = oRules[j].styleSheet))
modifySheet(oMozImpSheet, rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheet.imports))
for (j=0; j<oMSIEImpSheet.length; j++)
modifySheet(oMSIEImpSheet[j], rSel, sAtt, vVal);
}

ciao, dhgm