Manipulating Element Styles Based on CSS Classes Using Prototype

Posted Dec 3, 2009
Last Updated Dec 21, 2012

Note: In 2011 we updated Webonizer to use jQuery instead of Prototype. As such, this page  is not currently working. The download file will work, however.

 


This is another lesson in changing the styles of HTML elements based on their class names. This version uses the Prototype Framework.

 

In my popular changecss() function, I manipulated the stylesheet rules directly. In this example, I get the elements with Prototype's selectors and apply styles to those elements directly.

Use the form to manipulate the style of elements in the content below. The form works by targeting elements based on their class names (the class attribute of the HTML elements). When you click the Demonstrate Button, the form will call a function called changeTheStylesWithPrototype(). That function takes the values set in the Styles Fieldset of the form and applies those styles to the content as specified in Class Targets.

Dynamically Style HTML Elements using JavaScript
Choose Elements to apply this to
Class Targets





Inside Of
Styles









Content in the top. Classes are myDivs, top and odd.

Content in the top. Classes are myDivs, top and odd.

Content in the top. Classes are myDivs, top and odd.

Content in the top. Classes are myDivs, top, mid and even.

Content in the mid. Classes are myDivs, top, mid and even.

Content in the mid. Classes are myDivs, top, mid and even.

Content in the mid. Classes are myDivs, mid and odd.

Content in the mid. Classes are myDivs, mid and odd.

Content in the mid. Classes are myDivs, mid and odd.

Content in the mid. Classes are myDivs, mid, bottom and even.

Content in the mid. Classes are myDivs, mid, bottom and even.

Content in the bottom. Classes are myDivs, mid, bottom and even.

Content in the bottom. Classes are myDivs, bottom and odd.

Content in the bottom. Classes are myDivs, bottom and odd.

Content in the bottom. Classes are myDivs, bottom and odd.


Notes

Credit

This lesson created by Shawn Olson. Feel free to share this with students, coworkers and friends. Please leave this credit line intact.

Making It Work

This lesson utilizes the Prototype JavaScript Framework and its extension called Script.Aculo.Us. Both are required for the JavaScript functions in this lesson to work. These two frameworks are not included with the download. The HTML of this document references both frameworks from the Google Ajax Libraries.

If you are working offline or have your internet security settings to block local HTML files from referencing web files, this page may not work. If you are having this problem, you should download both Prototype and Script.Aculo.Us to your local system and change the reference to those files in the head of this HTML document.

Comment

No HTML Tags are permitted.

Chris Distefano

Feb 19, 2010

I've aggregated data via a web service and would like to manipulate my styles based on what the data brings in. E.g., the local temp is below 30 so I want to display a blue color theme on my site - as opposed to the normal harvest color. Have you heard of this being done? Thanks.
Angry Teapot Level Design Awards

Newsletter Subscription