Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts

    programatically changing many styles

    In CSS one can have a single style apply to many elements.
    If one wants to programatically change the font of many elements in javascript, must one iteratively grind through each element, or is there a way to modify a single style and have that inherited by the many elements, much the same way as one would do inside of a CSS file???

    In particular, I want to be able to change the font of some text elements within a DIV.

    I know that I can put a <FONT> tag inside the DIV
    <DIV> <FONT blah....> regular content </FONT></DIV>
    But that would change EVERY element and I only want to change a specific (90%) set of elements.
    Wayne Christian

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Indeed there is - changing element styles in real time


    But I do have to say; I've used this, and although it's much more elegant code, it wasn't actually any faster than iterating with getElementsByTagName


    btw - you're not really using <font> tags ... are you?
    Last edited by brothercake; 04-07-2003 at 10:28 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I haven't coded anything yet. Font was just the first thing to come to mind. What would you suggest for changing the font of text elements?
    Wayne Christian

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Define CSS classes for them; then you can change the styles programatically.
    Last edited by brothercake; 04-07-2003 at 10:52 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok, let me see if I understand this correctly...
    The response you indicated would require that the elements be directly affected (inherit) the style, which is not how I originally phrased the problem. I was thinking that the elements would be contained by something which is affected by the style.
    I'll attribute this to my not fully understanding how CSS might work (Highly likely)

    so...
    something like
    .mydivclass * TD
    {
    font : ...... ;
    }

    would affect the font of all the TD elements within this DIV, or
    alternatively, I could put a class="myfontstuff" on all the elements
    whose font I want affected.
    .myfontstuff
    {
    font: .... ;
    }

    then I could use the javascript code you pointed to and modify the style attribute.

    Does this sound about right?
    Thanx for the very quick response...
    Wayne Christian

  • #6
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oops,
    I just realized that the addressability of the style class
    ...
    if (rules.item(i).type == CSSRule.STYLE_RULE && rules.item(i).selectorText == '.myP')
    ...

    can I use

    selectorText == ".class * element"

    to search for
    .class * element
    {
    }

    and do I have to get the spacing exactly right
    Wayne Christian

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well that particular rule you pasted will match

    .myP { }

    Not sure where you're getting that * from
    Last edited by brothercake; 04-07-2003 at 11:12 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    wac
    wac is offline
    Regular Coder wac's Avatar
    Join Date
    Sep 2002
    Location
    Cary, North Carolina, USA
    Posts
    359
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I was trying to be fancy and applying the style to the childrent of a container without having to put the class attribute on all the child elements.

    I got this from
    http://www.echoecho.com/documentatio...rg/TR/REC-CSS2

    '...The following selector:

    DIV * P

    matches a P element that is a grandchild or later descendant of a DIV element. Note the whitespace on either side of the "*". ...'
    Wayne Christian

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh right; well I'm not sure if you can select rules with that kind of syntax; I can't see why not - but you'd have to try it and see.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •