changing class properties

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Jeff Thies

    changing class properties

    I have a number of elements of "some-class".

    I'd like to change the styles of some-class:

    from

    ..some-class{color: red; display: block}

    to

    ..some-class{color: red; display: none}

    How do I do that?

    Cheers,
    Jeff
  • Stuart Palmer

    #2
    Re: changing class properties

    what are you trying to do this for? links?different browsers? there may be a
    better way to do it than using JS to dynamicaly change it

    Stu

    "Jeff Thies" <cyberjeff@spri ntmail.com> wrote in message
    news:3F56D5FA.6 87D3D7F@sprintm ail.com...[color=blue]
    > I have a number of elements of "some-class".
    >
    > I'd like to change the styles of some-class:
    >
    > from
    >
    > .some-class{color: red; display: block}
    >
    > to
    >
    > .some-class{color: red; display: none}
    >
    > How do I do that?
    >
    > Cheers,
    > Jeff[/color]


    Comment

    • Jeff Thies

      #3
      Re: changing class properties

      Hi Stuart.

      Stuart Palmer wrote:[color=blue]
      >
      > what are you trying to do this for? links?different browsers?[/color]

      IE5+ maybe NS6
      [color=blue]
      > there may be a
      > better way to do it than using JS to dynamicaly change it[/color]

      I have form fields that I want to turn on/off (display: none) depending
      on the value of a rolldown.

      I could give ID's to all them and iterate through a list of them, seems
      awkward.

      I can change between the href of a stylesheet, so it can choose an
      external sheet that has the right class properties:

      document.styleS heets['a-stylesheet'].href='styleshe et_with_differe nt_class_proper ties';

      But it seems to me that I should be able to rewrite the rule in the
      stylesheet, I don't remember how... That would seem to be the most
      maintainable.

      Cheers,
      Jeff

      [color=blue]
      >
      > Stu
      >
      > "Jeff Thies" <cyberjeff@spri ntmail.com> wrote in message
      > news:3F56D5FA.6 87D3D7F@sprintm ail.com...[color=green]
      > > I have a number of elements of "some-class".
      > >
      > > I'd like to change the styles of some-class:
      > >
      > > from
      > >
      > > .some-class{color: red; display: block}
      > >
      > > to
      > >
      > > .some-class{color: red; display: none}
      > >
      > > How do I do that?
      > >
      > > Cheers,
      > > Jeff[/color][/color]

      Comment

      • Richard Cornford

        #4
        Re: changing class properties

        "Jeff Thies" <cyberjeff@spri ntmail.com> wrote in message
        news:3F56D5FA.6 87D3D7F@sprintm ail.com...[color=blue]
        > I have a number of elements of "some-class".
        >
        > I'd like to change the styles of some-class:
        >
        > from
        >
        > .some-class{color: red; display: block}
        >
        > to
        >
        > .some-class{color: red; display: none}
        >
        > How do I do that?[/color]

        It is probably tackling the problem form the wrong end, but if you
        insist on modifying the class definition rather than switching the class
        on the elements you will probably need to directly modify the
        documents.style Sheets object (where supported).

        Unfortunately there are two "types" of styleSheet object, the W3C DOM
        version (Mozilla, of course) and the IE version. With a number of
        browsers implementing both. Fortunately they are sufficiently similar in
        structure to be relatively easily worked with.

        The document.styleS heets object is a collection with indexed members (IE
        also supports members named by ID attribute but sticking to the indexes
        is more cross browser). So the first styleSheet is:-

        if(document.sty leSheets){
        var sheet = document.styleS heets[0]
        ...
        }

        Each styleSheet contains a collection of style rules. On the W3C version
        the collection is called "cssRules" and on IE it is called "rules", so:-

        if(sheet){
        var ssRules = sheet.cssRules || sheet.rules;
        ...
        }

        The rules are an indexed collection of style rules. I would not be
        inclined to rely on the order (though they may follow the order in the
        CSS on all implementations , but that would be an assumption). So that
        would probably involve looping through the rules list looking for the
        required item.

        if(sheet){
        var result = null;
        for(var c = 0; c < ssRules.length; c++){
        if(ssRules[c].selectorText == ".some-class"){
        result = ssRules[c].style;
        break;
        }
        }
        ...
        }

        Having identified the rule that has the desired - selectorText - value
        that rule has a - style - object (virtually identical to normal
        elements - style - objects) on which the desired property can be set:-

        if(result){
        result.display = "none"; //This object could be cached
        //so that subsequent changes
        //could avoid going through
        //the whole retrieval process.
        ...
        }

        Of the major browsers Opera 7.11 currently does not implement a
        document.styleS heets object and you won't get much joy out of Netscape 4
        with this method (not that switching the display property works there
        anyway) so it must be handled cautiously to avoid errors.

        Another approach that might prove fruitful could be to declare two
        separate STYLE elements and set the - disabled - attribute on one of
        them. Later using a script to switch the initially disabled STYLE
        element to enabled and disable the other. I haven't tried that myself
        but I have seen it done in order to switch between multiple external
        style sheets and it did work with Opera 7.

        Richard.


        Comment

        • Jeff Thies

          #5
          Re: changing class properties

          > > there may be a[color=blue][color=green]
          > > better way to do it than using JS to dynamicaly change it[/color]
          >
          > I have form fields that I want to turn on/off (display: none) depending
          > on the value of a rolldown.[/color]

          This is a bit awkward but it works in IE5:
          I can't get it to use named stylesheets. Isn't there a better way to
          quit a loop than return 0?

          <html>
          <head>
          <script type="text/javascript">
          function setClassStyle(s _s,classname,cl ass_style,style _value){
          var style_sheet=doc ument.styleShee ts[s_s];
          for (var j=style_sheet.r ules.length-1;j>=0;j--){
          var sS=style_sheet. rules[j];
          var class_name=sS.s electorText.rep lace(/\./g,'');
          if(class_name== classname){
          sS.style[class_style]=style_value;
          return 0;
          }
          }}
          </script>
          <style type="text/css" name="s">
          ..a{color: blue}
          ..b{color: orange}
          </style>
          </head>
          <body>
          <a href="javascrip t:void(0)"
          onclick="setCla ssStyle(0,'a',' color','red')"> make red</a><br />
          <a href="javascrip t:void(0)"
          onclick="setCla ssStyle(0,'a',' color','orange' )">make orange</a>
          <p class="a">some class a text is here</p>

          </body>
          </html>

          Cheers,
          Jeff











          [color=blue]
          >
          > I could give ID's to all them and iterate through a list of them, seems
          > awkward.
          >
          > I can change between the href of a stylesheet, so it can choose an
          > external sheet that has the right class properties:
          >
          > document.styleS heets['a-stylesheet'].href='styleshe et_with_differe nt_class_proper ties';
          >
          > But it seems to me that I should be able to rewrite the rule in the
          > stylesheet, I don't remember how... That would seem to be the most
          > maintainable.
          >
          > Cheers,
          > Jeff
          >[color=green]
          > >
          > > Stu
          > >
          > > "Jeff Thies" <cyberjeff@spri ntmail.com> wrote in message
          > > news:3F56D5FA.6 87D3D7F@sprintm ail.com...[color=darkred]
          > > > I have a number of elements of "some-class".
          > > >
          > > > I'd like to change the styles of some-class:
          > > >
          > > > from
          > > >
          > > > .some-class{color: red; display: block}
          > > >
          > > > to
          > > >
          > > > .some-class{color: red; display: none}
          > > >
          > > > How do I do that?
          > > >
          > > > Cheers,
          > > > Jeff[/color][/color][/color]

          Comment

          • Jeff Thies

            #6
            Re: changing class properties

            Thanks Richard,

            You answered every question I had and a few that hadn't occured to me.

            Here's what I'll probably use:

            function setClassStyle(s heet_index,clas sname,class_sty le,style_value) {
            var style_sheet=doc ument.styleShee ts[sheet_index];
            if(!style_sheet ){return;}
            var sRules = style_sheet.css Rules || style_sheet.rul es;
            for (var j=sRules.length-1;j>=0;j--){ // later rules will overide //
            earlier
            var sS=sRules[j];
            var class_name=sS.s electorText.rep lace(/\./g,'');
            if(class_name== classname){
            sS.style[class_style]=style_value;
            break;
            }
            }}


            I'm not going to worry about Opera 7 for this as there will be only a
            handfull of IE users. My guess is that my client is going to want to
            change how he want these forms to change and I thought classname changes
            would have been the easiest to switch.

            Thanks!
            Jeff
            [color=blue][color=green]
            > > I have a number of elements of "some-class".
            > >
            > > I'd like to change the styles of some-class:
            > >
            > > from
            > >
            > > .some-class{color: red; display: block}
            > >
            > > to
            > >
            > > .some-class{color: red; display: none}
            > >
            > > How do I do that?[/color]
            >
            > It is probably tackling the problem form the wrong end, but if you
            > insist on modifying the class definition rather than switching the class
            > on the elements you will probably need to directly modify the
            > documents.style Sheets object (where supported).
            >
            > Unfortunately there are two "types" of styleSheet object, the W3C DOM
            > version (Mozilla, of course) and the IE version. With a number of
            > browsers implementing both. Fortunately they are sufficiently similar in
            > structure to be relatively easily worked with.
            >
            > The document.styleS heets object is a collection with indexed members (IE
            > also supports members named by ID attribute but sticking to the indexes
            > is more cross browser). So the first styleSheet is:-
            >
            > if(document.sty leSheets){
            > var sheet = document.styleS heets[0]
            > ...
            > }
            >
            > Each styleSheet contains a collection of style rules. On the W3C version
            > the collection is called "cssRules" and on IE it is called "rules", so:-
            >
            > if(sheet){
            > var ssRules = sheet.cssRules || sheet.rules;
            > ...
            > }
            >
            > The rules are an indexed collection of style rules. I would not be
            > inclined to rely on the order (though they may follow the order in the
            > CSS on all implementations , but that would be an assumption). So that
            > would probably involve looping through the rules list looking for the
            > required item.
            >
            > if(sheet){
            > var result = null;
            > for(var c = 0; c < ssRules.length; c++){
            > if(ssRules[c].selectorText == ".some-class"){
            > result = ssRules[c].style;
            > break;
            > }
            > }
            > ...
            > }
            >
            > Having identified the rule that has the desired - selectorText - value
            > that rule has a - style - object (virtually identical to normal
            > elements - style - objects) on which the desired property can be set:-
            >
            > if(result){
            > result.display = "none"; //This object could be cached
            > //so that subsequent changes
            > //could avoid going through
            > //the whole retrieval process.
            > ...
            > }
            >
            > Of the major browsers Opera 7.11 currently does not implement a
            > document.styleS heets object and you won't get much joy out of Netscape 4
            > with this method (not that switching the display property works there
            > anyway) so it must be handled cautiously to avoid errors.
            >
            > Another approach that might prove fruitful could be to declare two
            > separate STYLE elements and set the - disabled - attribute on one of
            > them. Later using a script to switch the initially disabled STYLE
            > element to enabled and disable the other. I haven't tried that myself
            > but I have seen it done in order to switch between multiple external
            > style sheets and it did work with Opera 7.
            >
            > Richard.[/color]

            Comment

            • Richard Cornford

              #7
              Re: changing class properties

              "Jeff Thies" <cyberjeff@spri ntmail.com> wrote in message
              news:3F56E980.F 0FE2648@sprintm ail.com...
              <snip>[color=blue]
              > for (var j=sRules.length-1;j>=0;j--){[/color]
              <snip>

              An alternative - for - loop that counts down through an array-like
              collection:-

              for(var j = sRules.length ; j-- ; ){
              ...
              }

              Richard.


              Comment

              Working...