Node: Node Styling
This example shows how to style an element using Node.
Click me to change my color and show some style information.
Setting up the HTML
First we need some HTML to work with.
<div id="demo"> <p>Click me to change my color and show some style information.</p> </div>
Using Style Methods
In this example, we will set the node's color and compare the style and computedStyle values when our demo node is clicked.
var onClick = function(e) {
var node = e.currentTarget;
if (!node.one('dl')) { // only create the DL once
node.setStyle('color', 'green');
var styleColor = node.getStyle('color'),
computedColor = node.getComputedStyle('color');
node.append('<dl>' +
'<dt>style.color</dt><dd>' + styleColor + '</dd>' +
'<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +
'</dl>');
}
};The last step is to assign the click handler.
Y.one('#demo').on('click', onClick);Full Script Source
YUI().use('node', function(Y) {
var onClick = function(e) {
var node = e.currentTarget;
if (!node.one('dl')) { // only create the DL once
node.setStyle('color', 'green');
node.setStyle('color', 'green');
var styleColor = node.getStyle('color'),
computedColor = node.getComputedStyle('color');
node.append('<dl>' +
'<dt>style.color</dt><dd>' + styleColor + '</dd>' +
'<dt>computedStyle.color</dt><dd>' + computedColor + '</dd>' +
'</dl>');
}
};
Y.one('#demo').on('click', onClick);
});