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.

---

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.