Topic: Change CSS class using Protoype

Does anyone know how to change a CSS class using Prototype or javascript?

I can change the style properties, but I'd really like to change the class itself.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Change CSS class using Protoype

http://www.prototypejs.org/api/element

<%= link_to_function("Add/Remove the big class") do |page|
      page[:sidebar].toggleClassName('big')
    end %>

There is also:
.addClassName()
.removeClassName()

Vincent Woo Ruby on Rails Blog

Re: Change CSS class using Protoype

Thanks, but I actually want to write the class on-the-fly, not just set a new class.

createClassSomehow('new_class');
element.addClassName('new_class');

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Change CSS class using Protoype

Not sure about that. Someone at the bottom of this forum thread suggests appending a style tag to the head tag.

http://csscreator.com/node/312

Vincent Woo Ruby on Rails Blog

Re: Change CSS class using Protoype

Interesting, thanks very much ...

My interim hack is to loop through all the elements belonging to a particular class and set the element.style attributes manually. You can even add a class name and treat that set of attributes as a "virtual" CSS class ... with a sort-of "set-up/tear-down" process.

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================

Re: Change CSS class using Protoype

I've posted some details of my solution on how to fake some dynamic CSS classes: http://info-architects.net/2007/08/14/s … s-classes/

You basically create a JavaScript object that describes the properties, then apply this to the Element. Much fun.

  var green = {
    color: "#00FF00"
  };

  Object.extend(Element.Methods, {
    setClass:function(element, className) {
      element = $(element);
      element.addClassName(className);
      klass = eval(className);
      for (var property in klass) {
        element.style[property] = klass[property];
      }
    }
  });

Toby Hede
===================================================
FiniteStateMachine - Software Development for Social Networks
===================================================