dojo.attr¶
Status: | Final |
---|---|
Version: | 1.0 |
Available: | since 1.2 |
Contents
A getter and setter for DOM attributes, events and CSS styles
Introduction¶
dojo.attr() gives you a unified API to deal with DOM Node attribute and property values. It checks an attribute and if there is a property with the same name, it will get/set its value. Otherwise it will work with DOM node attributes.
On top of that several browsers deal with attribute setting and getting in different ways.
If an attribute was not specified for the DOM node, it will return a falsy value (see dojo.hasAttr). If you want to get a default value for missing attributes, use dojo.getPropNode, which always falls back to properties, if they are available.
Usage¶
1 | dojo.attr(node, attr, value);
|
- node
- id or reference of the DOM node to get/set style for
- attr
- the attribute property name or an object with key/value pairs suitable for setting each property.
- value
- If passed, sets value on the node for an attribute, handling cross-browser concerns.
Examples¶
Setting different node attributes¶
The following example will set several attributes such as the "tabindex" and "name"
<script type="text/javascript"> function setAttributes(){ dojo.attr('testNode', { tabIndex: 1, name: "nameAtt", innerHTML: "New Content" }); } function displayAttributes(){ dojo.attr("console", "innerHTML", "tabindex: "+dojo.attr("testNode", "tabindex")+"\n" + "name: "+dojo.attr("testNode", "name")+"\n" + "innerHTML: "+dojo.attr("testNode", "innerHTML")+"\n" ); } </script>
<button dojoType="dijit.form.Button" id="buttonOne" onClick="setAttributes();">Set attributes</button> <button dojoType="dijit.form.Button" id="buttonTwo" onClick="displayAttributes();">Get attributes</button> <div id="testNode">Hi friends :)</div> <div id="console"></div>
Setting events¶
This example will demonstrate how you can set events using dojo.attr(). You should still consider using dojo.connect when you are dealing with events since you are getting lots more possibilities and granularity with using dojo.connect. In particular you get a handle to later disconnect the event.
<script type="text/javascript"> function setupHandlers(){ dojo.attr("testNodeTwo", "onmouseover", function(evt){ dojo.attr("consoleOne", "innerHTML", "The mouse is over"); }); dojo.attr("testNodeTwo", "onclick", function(evt){ dojo.attr("consoleOne", "innerHTML", "The mouse was clicked"); }); } </script>
<button dojoType="dijit.form.Button" id="buttonThree" onClick="setupHandlers();">Setup handlers</button> <div id="testNodeTwo">Hi, try the events! Click me or hover me.</div> <div id="consoleOne"></div>
Setting styles¶
The following example will set the "style" attribute of the given dom node. When you set "style" with dojo.attr() it delegates the work to dojo.style().
<script type="text/javascript"> function changeStyle(){ dojo.attr("testNodeThree", "style", {padding: "5px", border: "1px solid #ccc", background: "#eee"}); } </script>
<button dojoType="dijit.form.Button" id="buttonFour" onClick="changeStyle();">Change style</button> <div id="testNodeThree">Hi, change my style</div>