By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,098 Members | 1,918 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,098 IT Pros & Developers. It's quick & easy.

Changing CSS 2.1 descendant selectors

P: n/a
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
Jul 23 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a


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

* html td {
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?
font-style: italic;
}

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


IE has its own object model to access stylesheets, see
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/collections/stylesheets.asp>
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/collections/imports.asp>

Mozilla implements (parts of) the W3C DOM Level 2 for CSS stylesheets as
documented here:
<http://www.w3.org/TR/DOM-Level-2-Style/>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet-DocumentStyle>
<http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet>
<http://www.w3.org/TR/DOM-Level-2-Style/css.html#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://JavaScript.FAQTs.com/
Jul 23 '05 #2

P: n/a
Martin Honnen wrote:
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.


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
Jul 23 '05 #3

P: n/a
Martin Honnen wrote:
Andrew Poulos wrote:
[snip]
* html td {


Pretty odd selector


It's an IE hack. For some reason, IE doesn't believe that HTML is the
root element for HTML documents.
I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.


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.
Jul 23 '05 #4

P: n/a
Dietmar Meier wrote:
Here's a quick hack [...]


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
Jul 23 '05 #5

P: n/a


Michael Winter wrote:
Martin Honnen wrote:

I know that Opera 7 (and current 8.0 beta) do not provide script
access to stylesheets.

I know that the styleSheets collection isn't available, but can you
get direct access via a reference to a LINK or STYLE element?


As far as I remember for 7.xy it is not possible, those elements do not
expose a property named sheet as they would need to expose a style
sheet. I have just tested with 8.0 beta and again there is no such
property. Of course if those properties where there then
document.styleSheets should be easy.
So unless with direct access via a reference to link or style you meant
parsing their content by hand then no, with Opera access to stylesheet
information (style sheets in the document and rules in the style sheet)
is not provided.
So with Opera if you want to change some style rule all you can do is
create a new <style> element, throw in a text node with the complete new
rule as needed and insert the <style> element at the end of the head,
that way it overrides earlier rules but if you do that a lot it is
pretty inefficient.
--

Martin Honnen
http://JavaScript.FAQTs.com/
Jul 23 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.