dojo.style¶
Status: | Draft |
---|---|
Version: | 1.0 |
Available: | since V? |
A getter/setter for styles on a DOM node.
Introduction¶
Accesses styles on a node. If 2 arguments are passed, acts as a getter. If 3 arguments are passed, acts as a setter.
See the Tips section below for caveats on getting style information, like when using a compound style value (like background or border), and getting node dimensions.
Usage¶
1 2 3 | <script type="text/javascript">
dojo.style(node, style, value);
</script>
|
- node
- id or reference of the DOM node to get/set style for
- style
- the style property to set in DOM-accessor format ("borderWidth", not "border-width") or an object with key/value pairs suitable for setting each property.
- value
- If passed, sets value on the node for style, handling cross-browser concerns. When setting a pixel value, be sure to include "px" in the value. For instance, top: "200px". Otherwise, in some cases, some browsers will not apply the style.
Examples¶
Get the style of a DOM node¶
Passing only an ID or node returns the computed style object of the node:
<style type="text/css"> .style1 { color: red; padding: 10px; border: 1px red solid; } #poorboy_styles li { display:inline; } #poorboy_styles li .prop { color: blue; } </style>
<script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
<div id="poorboy" class="style1">Don't look at me - I'm just a poor DOM node.</div> <ul id="poorboy_styles"></ul> <div dojoType="dijit.form.Button"> get the current style <script type="dojo/method" event="onClick" args="evt"> // Get the style from DOM node "poorboy": var s = dojo.style("poorboy"); for(var i in s){ var n = dojo.doc.createElement('li'); n.innerHTML = i + " = <span class='prop'>" + s[i] + "</span>, "; dojo.place(n, "poorboy_styles", "last"); } </script> </div>
Get a single style property of a DOM node¶
Passing a node and a style property returns the current normalized, computed value for that property:
<style type="text/css"> .style2 { color: blue; padding: 10px; border: 1px blue solid; } </style>
<script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
<div id="poorboy2" class="style2">I will tell you anything...</div> <div dojoType="dijit.form.Button"> give me the color <script type="dojo/method" event="onClick" args="evt"> // Get the color property from DOM node "poorboy2": alert(dojo.style("poorboy", "color")); </script> </div>
Set a style property¶
Passing a node, a style property, and a value changes the current display of the node and returns the new computed value:
<style type="text/css"> .style3 { color: green; padding: 10px; border: 1px green solid; } </style>
<script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
<div id="poorboy3" class="style3">I don't like this green</div> <div dojoType="dijit.form.Button"> give me another color <script type="dojo/method" event="onClick" args="evt"> // Set the color 'red' to DOM node "poorboy3": dojo.style("poorboy3", "color", "red"); </script> </div>
Set multiple style properties at once¶
Passing a node, an object-style style property sets each of the values in turn and returns the computed style object of the node:
<style type="text/css"> .style4 { color: black; padding: 10px; border: 1px black solid; } .nib { font-size: 4.2em; } </style>
<script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
<div id="poorboy4" class="style4"><span class="nib">NIB</span><br/>NODE IN BLACK</div> <div dojoType="dijit.form.Button"> set multiple style properties <script type="dojo/method" event="onClick" args="evt"> // Set the color to 'white', background-color to "black", padding to "20px" to DOM node "poorboy4": dojo.style("poorboy4", { "backgroundColor": "black", "color": "white", "padding": "20px" }); </script> </div>
Use dojo.style() with a list of nodes¶
dojo.NodeList implements .style() using the same syntax, omitting the "node" parameter, calling dojo.style() on every element of the list.
<style type="text/css"> .style5 { color: black; padding: 10px; border: 1px black solid; } .sweet { color: #FF8C8C; } </style>
<script type="text/javascript"> dojo.require("dijit.form.Button"); </script>
<div id="poorboy5" class="style5"> <p>The different faces of dojo.style():</p> <ul> <li class="sweet">dojo.style(node);</li> <li class="sweet">dojo.style(node, property);</li> <li class="sweet">dojo.style(node, property, value);</li> <li class="sweet">dojo.style(node, object);</li> </ul> </div> <div dojoType="dijit.form.Button"> change the style for each point <script type="dojo/method" event="onClick" args="evt"> // Set the color to 'red', opacity to 0.5, border to "3px solid black" to DOM node "poorboy4": dojo.query(".sweet").style({ "backgroundColor": "#B822B0", "color": "#FFFF00" }); </script> </div>
Tips¶
If the CSS style property is hyphenated, the JavaScript property is camelCased.
for example: "font-size" becomes "fontSize", and so on
You will get a "TypeError: n is null", if you call dojo.style() on a non existent DOM node. It's more safe to use dojo.query("#a").style("b","c");
dojo.style uses getComputedStyle to get the style value, so the value will be a calculated value, not just the immediate node.style value.
Getting the value for a compound style value (like background or border): you need to ask for specific properties, like bottomBorderWidth. Getting the "background" compound value is not reflected in the way you might think when using getComputedStyle.
For getting a node's dimensions, use dojo.marginBox or dojo.contentBox: the .width and .style properties are not accurate from getComputedStyle.