In this example, we'll change some colors in this page's color theme. Enter any valid CSS color value into the inputs and submit the changes to see them applied to the page.
For the sake of illustration, we'll leave the form in our demo unstyled, then apply a skin to it when we create our working
We'll put our code in a
YAHOO.demo.PageTheme namespace. In this namespace, we'll add an
init() method that we'll schedule to execute when the DOM is ready. We'll seed the
init() method by creating an instance of
YAHOO.util.StyleSheet and passing the constructor all the CSS to skin the form.
This is enough to create a new StyleSheet instance, hosting a
<style> element with our form's skin. Note that this is done for illustration only. In general, this approach should be avoided in production environments unless there's a compelling reason. Static CSS should be served as
.css files linked from
Now we'll add the important stuff. Listening for the form submission to change the style rules. We'll cache the inputs in the
init() method and set up the submit listener to call a new method
And that's it! If you have an interactive console such as FireBug, you can play around with the StyleSheet instance at
The full code listing for this example is below, including the source for
isValidColor. The full markup was included above.
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.