YUI Library Examples: Dom Collection: Using setStyle
Dom Collection: Using setStyle
Clicking the button will use Dom's setStyle method to set the opacity of the element.
Using setStyle
setStyle, part of the YUI Dom Collection, makes it easy to set the style properties of an HTMLElement. One of the benefits of this method is that it provides normalized (and simpler) mechanism for setting opacity in Internet Explorer.
To illustrate the use of setStyle, we'll create a <div> called foo. When the button is clicked, the opacity of foo will be set to 0.5.
Add some simple CSS rules and markup for the demo element:
| 1 | <style type="text/css"> |
| 2 | #foo { |
| 3 | background-color:#00f; |
| 4 | color:#fff; |
| 5 | height:100px; |
| 6 | width:100px; |
| 7 | } |
| 8 | </style> |
| 9 | |
| 10 | <div id="foo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div> |
| 11 | <button id="demo-run">run</button> |
| view plain | print | ? |
Now we will define the function that sets the opacity of foo. The first argument of the setStyle method is either the ID of an HTMLElement, or an actual HTMLElement object. The second argument is the style property being set, and the third is the value to be applied to the property.
| 1 | <script type="text/javascript"> |
| 2 | var fade = function() { |
| 3 | YAHOO.util.Dom.setStyle('foo', 'opacity', 0.5); |
| 4 | }; |
| 5 | </script> |
| view plain | print | ? |
Next we will use the YUI Event Utility's on method to listen for clicks on the button.
| 1 | <script type="text/javascript"> |
| 2 | YAHOO.util.Event.on('demo-run', 'click', fade); |
| 3 | </script> |
| view plain | print | ? |
This is a simple example of how to use the YAHOO.util.Dom.setStyle method. In addition to normalizing opacity, setStyle fixes other properties that vary across browsers (e.g. "float").
Configuration for This Example
You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.
YUI Logger Output:
Logger Console
INFO 44ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-Dom010
WARN 44ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 44ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-LogReader09
WARN 44ms (+1) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-Get08
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-example07
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-global06
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-window05
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-time04
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-error03
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-warn02
WARN 43ms (+0) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 43ms (+0) 2:21:11 PM:
Dom
generateId generating yui-log-filter-info01
WARN 43ms (+1) 2:21:11 PM:
Dom
batch called with invalid arguments
INFO 42ms (+1) 2:21:11 PM:
Dom
generateId generating yui-log-hd00
INFO 41ms (+9) 2:21:11 PM:
LogReader instance0
LogReader initialized
INFO 32ms (+1) 2:21:11 PM:
Get
Appending node: ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+0) 2:21:11 PM:
Get
attempting to load ../../../2.x/build/event-mouseenter/event-mouseenter-min.js
INFO 31ms (+29) 2:21:11 PM:
Get
_next: q0, loaded: undefined
INFO 2ms (+2) 2:21:11 PM:
example
The example has finished loading; as you interact with it, you'll see log messages appearing here.
INFO 0ms (+0) 2:21:11 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Dom Collection Examples:
More Dom Collection Resources:
- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)
- Yahoo! UI Library
- Home (external)
- YUIBlog (external)
- YUI Discussion Forum (external)
- YUI on GitHub
- API Documentation
- Functional Examples
- YUI Theater (external)
- YUI License (external)
- YUI Functional Examples
- Animation
- AutoComplete
- Browser History Manager
- Button
- Calendar
- Carousel
- Charts
- Color Picker
- Cookie
- Connection Manager
- Container
- DataTable
- Dom
- Drag & Drop
- Event
- Get
- ImageCropper
- ImageLoader
- JSON
- Layout Manager
- Logger
- Menu
- Paginator
- Profiler
- ProfilerViewer
- ProgressBar
- Resize
- Rich Text Editor
- Selector
- Slider
- Storage
- SWF
- SWFStore
- Stylesheet
- TabView
- TreeView
- Uploader (experimental)
- YAHOO Global Object
- YUI Loader
- YUI Test
- Reset CSS
- Base CSS
- Fonts CSS
- Grids CSS
- YUI Articles on the YUI Website
- YUI FAQ (external)
- Graded Browser Support (external)
- Bug Reports/Feature Requests (external)
- Serving YUI Files from Yahoo! (external)
- Security Best Practices (external)
Copyright © 2011 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings