Changing CSS 2.1 descendant selectors

Discussion in 'Javascript' started by Andrew Poulos, Feb 2, 2005.

  1. 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
     
    Andrew Poulos, Feb 2, 2005
    #1
    1. Advertising

  2. 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/
     
    Martin Honnen, Feb 2, 2005
    #2
    1. Advertising

  3. 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, 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
     
    Dietmar Meier, Feb 2, 2005
    #3
  4. 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.
     
    Michael Winter, Feb 2, 2005
    #4
  5. 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, 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
     
    Dietmar Meier, Feb 2, 2005
    #5
  6. Re: style sheet script access in Opera [Was:Changing CSS 2.1 descendantselectors]

    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/
     
    Martin Honnen, Feb 2, 2005
    #6
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Matt Beckwith

    Class and ID Selectors (CSS question)

    Matt Beckwith, Jul 12, 2003, in forum: HTML
    Replies:
    3
    Views:
    383
    David Dorward
    Jul 13, 2003
  2. Derek Clarkson
    Replies:
    3
    Views:
    380
    Derek Clarkson
    Nov 7, 2003
  3. Nik Coughin

    css - descendant selectors

    Nik Coughin, Jan 28, 2004, in forum: HTML
    Replies:
    2
    Views:
    387
    Alliss
    Jan 29, 2004
  4. Jeanne D

    Question about CSS selectors

    Jeanne D, Oct 15, 2005, in forum: HTML
    Replies:
    8
    Views:
    380
    Jeanne D
    Oct 16, 2005
  5. Jon Slaughter

    css selectors

    Jon Slaughter, Apr 17, 2007, in forum: HTML
    Replies:
    13
    Views:
    946
    Ben C
    Apr 21, 2007
Loading...

Share This Page