Apply style changes to a whole CSS class

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Waffeloo
    #1

    Apply style changes to a whole CSS class

    Hi,
    I would like an event to trigger a change the style of all the elements that
    belong to some CSS class.

    I know it is possible to change the class of an element, for example with:
    <script language=javasc ript>
    function changeclass()
    {document.getEl ementById(id).c lassName="class _id";}
    </script>
    <input type=checkbox onclick="javasc ript:changeclas s()">

    But this can only change one element. I would like to change the
    "property:l ist" pairs of a CSS class, so that changes can apply to more
    than one element.

    Is it possible with javascript?
    Tags: None
    • ASM
      #2
      Re: Apply style changes to a whole CSS class

      Waffeloo wrote:[color=blue]
      > Hi,
      > I would like an event to trigger a change the style of all the elements that
      > belong to some CSS class.
      >
      > I know it is possible to change the class of an element, for example with:
      > <script language=javasc ript>
      > function changeclass()
      > {document.getEl ementById(id).c lassName="class _id";}
      > </script>
      > <input type=checkbox onclick="javasc ript:changeclas s()">[/color]

      function changeclass(ele m,newClass)
      {document.getEl ementById(elem) .className=newC lass;}
      </script>
      <input type=checkbox onclick="javasc ript:changeclas s('div_1','spec _9')">
      [color=blue]
      > But this can only change one element. I would like to change the
      > "property:l ist" pairs of a CSS class, so that changes can apply to more
      > than one element.
      >
      > Is it possible with javascript?[/color]

      I think you can't modiy properties of a class defined
      (except, perhaps with IE and sheetStyle.rule s ?)

      You can catch all tags collection of the page
      and for each tag with a certain class, change it :

      var D = document.getEle mentsByTagName( '*');
      for(var i=0;i<D.length; i++)
      if(D[i].className=='tr uc') D[i].className="tri ck";

      of course you need 2 classes
      of course you need your elements have a class
      (it is not always)

      you may also search lists elements and change their styles

      var L = document.getEle mentsByTagName( 'UL')
      for(var i=0;i<L.length; i++)
      if(L[i].style.textDeco ration=='none') D[i].style.textDeco ration='underli ne';


      --
      Stephane Moriaux et son [moins] vieux Mac

        Comment

        • RobG
          #3
          Re: Apply style changes to a whole CSS class

          Waffeloo wrote:[color=blue]
          > Hi,
          > I would like an event to trigger a change the style of all the elements that
          > belong to some CSS class.
          >
          > I know it is possible to change the class of an element, for example with:
          > <script language=javasc ript>
          > function changeclass()
          > {document.getEl ementById(id).c lassName="class _id";}
          > </script>
          > <input type=checkbox onclick="javasc ript:changeclas s()">
          >
          > But this can only change one element. I would like to change the
          > "property:l ist" pairs of a CSS class, so that changes can apply to more
          > than one element.
          >
          > Is it possible with javascript?[/color]

          Yes, this thread should give you all you need:

          <URL:http://groups.google.c o.uk/group/comp.lang.javas cript/browse_frm/thread/3daffc9ed1c3afe e/f800fd5529ed50b 0?q=change+CSS+ style+rule&rnum =6&hl=en#f800fd 5529ed50b0>




          --
          Rob

            Comment

            • Waffeloo
              #4
              Re: Apply style changes to a whole CSS class

              Waffeloo wrote:
              [color=blue]
              > Hi,
              > I would like an event to trigger a change the style of all the elements
              > that belong to some CSS class.
              >
              > I know it is possible to change the class of an element, for example with:
              > <script language=javasc ript>
              > function changeclass()
              > {document.getEl ementById(id).c lassName="class _id";}
              > </script>
              > <input type=checkbox onclick="javasc ript:changeclas s()">
              >
              > But this can only change one element. I would like to change the
              > "property:l ist" pairs of a CSS class, so that changes can apply to more
              > than one element.
              >
              > Is it possible with javascript?[/color]

              Thanks for the suggestions.
              I found an elegant and dirty way: change the name of the class of the <body>
              element, and have two sets of CSS rules:

              body.class_A .flipflop { nice style }
              body.class_B .flipflop { other style }

              So I can change the style of many elements with a few lines of code.

                Comment

                Previous template Next
                Working...