Changing CSS 2.1 descendant selectors

A

Andrew Poulos

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
 
M

Martin Honnen

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

* html td {
Click to expand...

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'?
Click to expand...

IE has its own object model to access stylesheets, see
<http://msdn.microsoft.com/library/d...r/dhtml/reference/collections/stylesheets.asp>
<http://msdn.microsoft.com/library/d...uthor/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.
 
D

Dietmar Meier

Martin said:
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.
Click to expand...

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, rSel, sAtt, vVal);
if ((oMSIEImpSheet = oSheets.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
 
M

Michael Winter

Martin said:
Andrew Poulos wrote:
[snip]
* html td {
Click to expand...

Pretty odd selector
Click to expand...

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.
Click to expand...

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
 
D

Dietmar Meier

Dietmar said:
Here's a quick hack [...]
Click to expand...

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, 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
 
M

Martin Honnen

Michael said:
Martin Honnen wrote:


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

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Working on mobile css menu with plenty of frustration! 2
Why <link/> is not working? 4
I need help fixing my website 2
Sort by number of characters 1
Image shifts to the right when export the page to pdf 4
I need help making a zooming function 11
How to have two html audio players on one page? 0

Members online

Total: 35 (members: 3, guests: 32)
Robots: 432

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,052
Latest member
LucyCarper

Latest Threads

Top