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 4 of 4
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing element styles in real time

    I'm using sliders to change text colour dynamically; at the moment, I'm doing it by iterating through the getElementsByTagName collection; like

    Code:
    paraAry = document.getElementsByTagName("p");
    paraLen=paraAry.length;
    for(j=0;j<paraLen;j++){
    	paraAry[j].style.color = "rgb("+bodyColor[0]+","+bodyColor[1]+","+bodyColor[2]+")";
    	paraAry[j].style.borderColor = "rgb("+textColor[0]+","+textColor[1]+","+textColor[2]+")";
    	paraAry[j].style.backgroundColor = "rgb("+textColor[0]+","+textColor[1]+","+textColor[2]+")";
    	}

    But blatantly it's well inefficient; is there a better way to achieve this - like just a single property I can change to make all elements of a given name change.
    Last edited by brothercake; 02-07-2003 at 12:08 AM.

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Yes, and it is called DOM2 CSS.

    Let's say you have a selector like so:

    .myP {
    /* styles for special paragraph elements of whatever */
    }

    And also assume that it is in the very first stylesheet on the page (you could always adjust the index number of course appropriately):

    var rules = document.styleSheets.item(0).cssRules;
    var pClass;
    for (var i = 0; i < rules.length; i++) {
    if (rules.item(i).type == CSSRule.STYLE_RULE && rules.item(i).selectorText == '.myP') {
    pClass = rules.item(i);
    break;
    }
    }

    Now, you can just go like:

    pClass.style.backgroundColor = 'red';

    and it will dynamically modify the style rule, which in turn affects all elements which inherit from it.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    And as an added bonus, IE supports something very similar to this. Like, instead of .cssRules, I think it is just .rules... and other minor discrepancies like that - but the same idea can still be done. Just browser around MSDN for the particular differences...

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's ideal, thank you


  •  

    Posting Permissions

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