Menu

dojo/dom-style

Project owner:Eugene Lazutkin
Authors:James Burke, Peter Higgins, Eugene Lazutkin, Marcus Reimann
since:V1.7

This module defines the core dojo DOM style API. The convention for the return variable for this module is domStyle or style.

Legacy features are set in dojo/_base/html.

Features

getComputedStyle()

getComputedStyle() is a companion function for get() and set(). It gets a “computed style” object which can be used to gather information about the current state of the rendered node.

Note This may behave differently on different browsers. Values may have different formats and value encodings across browsers.

Note This method is expensive. Wherever possible, reuse the returned object.

Use get() for more consistent (pixelized) return values.

Usage

require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  var node = dom.byId("myNode");
  var computedStyle = domStyle.getComputedStyle(node);
});

Attributes

Argument Type Description
node DomNode A reference to a DOM node. Does NOT support taking an ID string for speed reasons.

Examples

The following example computes the style for a node and outputs some of its values.

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
  on(dom.byId("command"), "click", function(){
    var node = dom.byId("example");
    var computedStyle = style.getComputedStyle(node);
    var output = "computedStyle.width: " + computedStyle.width + "<br/>";
    output += "computedStyle.height: " + computedStyle.height + "<br/>";
    output += "computedStyle.backgroundColor: " + computedStyle.backgroundColor + "<br/>";
    dom.byId("output").innerHTML = output;
  });
});

<button id="command" type="button">getComputedStyle()</button>
<div class="example" id="example">Some example node</div>
<p><strong>Output:</strong></p>
<div id="output"></div>

.example{
  margin: 1em;
  text-align: center;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: blue;
  width: 200px;
  height: 100px;
}

get()

get() gets the style value and uses the computed style for the node, so the value will be a calculated value, not just the immediate node.style value. Also when getting values, use the specific style names, like borderBottomWidth instead of border since compound values like border are not necessarily returned as expected. If you want to get node dimensions, use the dojo/dom-geometry module functions.

Usage

require(["dojo/dom-style"], function(domStyle){
  var width = domStyle.get("someNode", "width");
});

Using get() with just supplying a node and node attribute is syntactically equivalent to using getComputedStyle(). For example:

require(["dojo/dom-style", "dojo/dom"], function(domStyle, dom){
  var node = dom.byId("someNode");
  var getStyle = domStyle.get(node);
  var computedStyle = domStyle.getComputedStyle(node);
  // getStyle == computedStyle
});

Attributes

Arguments Type Description
node String|DomNode ID or reference to node to get style for
name String? The style property to get. If omitted, then returns the whole computed style object.

Examples

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
  on(dom.byId("command"), "click", function(){
    var backgroundColor = style.get("example", "backgroundColor");
    dom.byId("output").innerHTML = "example.backgroundColor: " + backgroundColor;
  });
});

<button id="command" type="button">style.get()</button>
<div class="example" id="example">Some example node</div>
<p><strong>Output:</strong></p>
<div id="output"></div>

.example{
  margin: 1em;
  text-align: center;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: blue;
  width: 200px;
  height: 100px;
}

set()

Sets the styles on a DOM node.

Usage

Setting a style is done like:

require(["dojo/dom-style"], function(domStyle){
  domStyle.set("someNode", "width", "100px");
});

Multiple styles can be done by using a hash as the name argument:

require(["dojo/dom-style"], function(domStyle){
  domStyle.set("someNode", {
    width: "100px",
    backgroundColor: "blue"
  });
});

To remove an inline style, set the value to an empty string(""):

require(["dojo/dom-style"], function(domStyle){
  domStyle.set("someNode", "display", "");
});

Note CSS attributes that contain a dash are lowerCamelCased in JavaScript. Like as above the CSS background-color becomes backgroundColor.

Attributes

Arguments Type Description
node String|DomNode ID or reference to node to get style for
name String|Object The style property to set in DOM-accessor format or an object with key/value pairs suitable for setting each property.
value String? 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

The following example changes the background color of a node and then shows the return value of the set() to show the current value:

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
  on(dom.byId("command"), "click", function(){
    var backgroundColor = style.set("example", "backgroundColor", "green");
    dom.byId("output").innerHTML = "example.backgroundColor: " + backgroundColor;
  });
});

<button id="command" type="button">Green Please!</button>
<div class="example" id="example">Some example node</div>
<p><strong>Output:</strong></p>
<div id="output"></div>

.example{
  margin: 1em;
  text-align: center;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: blue;
  width: 200px;
  height: 100px;
}

The following example changes several style properties at once by passing a hash of the values:

require(["dojo/dom-style", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(style, dom, on){
  on(dom.byId("command"), "click", function(){
    style.set("example", {
      backgroundColor: "green",
      border: "1px dashed black",
      margin: "0.5em",
      textAlign: "right"
    });
  });
});

<button id="command" type="button">Change Please!</button>
<div class="example" id="example">Some example node</div>

.example{
  margin: 1em;
  text-align: center;
  padding: 1em;
  border: 2px solid black;
  color: white;
  background-color: blue;
  width: 200px;
  height: 100px;
}

The return values of dojo/query also allow you to access to the CSS styling information in a similar way. The following turns all the all the red nodes orange.

require(["dojo/query", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(query, dom, on){
  on(dom.byId("command"), "click", function(){
    query(".red").style("backgroundColor", "orange");
  });
});

<button id="command" type="button">Change Please!</button>
<div class="red">A Node!</div>
<div class="green">A Node!</div>
<div class="red">A Node!</div>
<div class="green">A Node!</div>
<div class="red">A Node!</div>
<div class="green">A Node!</div>

.red, .green { margin: 10px; padding 10px; width: 200px; color: white; font-weight: bold; text-align: center; }
.red { background-color: red; }
.green { background-color: green; }

Tips

  • If the CSS style property is hyphenated, the JavaScript property is camelCased.

    For example: font-size becomes fontSize

  • You will get a TypeError: n is null, if you call get() or set() on a non existent DOM node. It’s more safe to use query("#a").style("b", "c");

  • get() 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/dom-geometry functions: as the .width and .style properties are not necessarily accurate from getComputedStyle().

See also

Error in the documentation? Can’t find what you are looking for? Let us know!