Dojo’s got style …
by Peter Higgins

There’s a great little utility function in Dojo Core I use _everywhere_ that goes by the name dojo.style. It isn’t anything new to Dojo (or any JavaScript library for that matter) but in 1.1 it became exceptionally more useful and I’d like to take a second to delve into some of the innards and new features.

To summarize: Dojo style acts as a setter or a getter for a named style property.
You pass it a node and a style, it returns the value. Pass a value as the third argument and the property will be set.

    var node = dojo.byId("foo");
	// set:
	dojo.style(node,"lineHeight","13pt");
	// get:
	var info = dojo.style(node,"lineHeight");
	console.log(info);

If you are accessing a node by it’s id attribute, you can skip the dojo.byId(”foo”) in a pinch.
If the first argument passed to style() is a string, it makes a pass through dojo.byId anyway:

	dojo.style("foo","visibility","hidden");

It is a really convenient way to style a property. Assigning the domNode to a variable allows us to reuse the pointer as well as enables your code for better ShrinkSafe compression. (ShrinkSafe replaces variables it knows to be private)

(function(){
 
    var node = dojo.byId("foo");
    dojo.style(node,"fontSize","15pt");
	dojo.style(node,"letterSpacing","1em");
	dojo.style(node,"opacity","0.25");
 
})();

All occurances of “node” in the above example would be replaced with some obfuscated two-character name after the build runs.

New in 1.1 is something that allows us to take that a step further: Object-setter-mode. If the second parameter passed to style is an object, style calls itself for each of the propeties in the object.
This is really nice. We can rewrite the above block as:

dojo.style("foo",{
	fontSize:"15pt",
	letterSpacing:"1em",
	opacity:"0.25"
});

Now we’re no longer duplicating text and our code is in no way obfuscated during development.
The above shorthand is a much cleaner and safer varition of something you see in JavaScript frequently:

// i'd rather you didn't do this
var node = dojo.byId("foo");
with(node.style){
	fontSize = "15pt";
	letterSpacing = "1em";
	opacity:"0.25";
}

… which of course will break Internet Explorer, as they use filter: for transparency. dojo.style() normalizes opacity control, and is a reliable way to modify transparency cross-browser.

Another quirky instance where the style name is not normalized: float. Some browsers use cssFloat, others styleFloat. As of 1.1 dojo.style() allows you to use any of of “float”,”cssFloat”, or “styleFloat” when styling the float: property.
(No browser uses “float”, being a reserved JavaScript word. You can’t use it unquoted as an object key, either)

dojo.style("foo","styleFloat","left");
dojo.style("bar","cssFloat","right");
dojo.style("baz",{
	"float":"left"
});

Each of the above examples will apply the appropriate float property in a cross-browser way. Neat.

And no cookie would be complete without mentioning the magic of dojo.query … All the signatures above work with dojo.NodeList.style() — less the node param.

dojo.query("div.link")
	.style({
		background:"#ccc",
		cursor:"pointer",
	})
;

Which will match all div’s class=”link”, and set the background and cursor styles in one fell swoop. Now you know all there is to know about dojo.style().

Tags: , , ,

This entry was posted on Tuesday, April 1st, 2008 at 12:00 pm and is filed under Dojo Cookies. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

7 Responses to “Dojo’s got style …”

  1. gtducati Says:

    The normalization of the style property is great. I am however running into a problem when using dojo.style(node,”background”) from Dojo 1.1.1, where the node is a table cell. In both, IE7 and FF2 I’m executing the following:

    var bgcolor1 = dojo.style(node,”background”);
    console.log(bgcolor1) ;

    The console output is “undefined” or “null” for the table cell background style value in my widget.

    Now, if I do:

    var bgcolor1 = node.style.background;
    console.log(bgcolor1) ;

    I’ll get respectively for IE7 and FF2, “gray” and “gray none repeat scroll 0% 0%.”

    So my question: what am I doing wrong to get the background style information?

  2. dante Says:

    IE is particularly painful when using style() as a getter on those “multiple setter attributes” like background:

    try: backgroundColor, backgroundImage, etc … they are more specific and usually only have one type of data (backgroundPosition has usually x and y)

    fwiw, I am the only person who gets alerted to these kinds of comments, the forums at http://dojotoolkit.org would be a good place to ask support questions and have more eyes on it (though this note applies to the Cookie, I can see quickly turning cookies into a forum would be a bad thing ™ :) )

    Regards,
    Peter Higgins

  3. gtducati Says:

    Hi Peter,

    Sorry about that. I was trying to keep the questions short and as pertinent to the cookie. It’s nice that you have dojocampus setup, since some of the documentation at dojotoolkit.org gets a bit confusing. I’ve been working with Dojo since January when I discovered it at a Sun Microsystems conference here in Atlanta. I consider myself pretty good at using Dojo and wouldn’t mind contributing a few cookies of my own.

    Thanks again for all your help.

    Sincerely,
    Gerald Lopez

  4. dante Says:

    @gtducati: It’s not a problem, I understand the docs at dojotoolkit.org are lacking the “extra insight” cookies provide. We’re working towards making the Book of Dojo more community-driven and up-to-date. DojoCampus was a “quick hack” while all those details were being worked out. Turns out DojoCampus is a pretty good dojo resource, so we might just have to stick around ;) Though there are a lot of people who don’t know or visit DojoCampus, so keeping genuine “support” requests there is beneficial to all. Your question about the nuances of style properties makes me want to write a getComputedStyle cookie, which is sometimes a shortcut to getting multiple styles …

    I’m just up from you in Tennessee, as well at ptwobrussell, the author of an upcoming dead-tree Dojo book. We’d been talking about doing an informal dojo.beer() / miniDDD on the east coast if you are interested. Details not yet solidified.

    Also, YES, we’d absolutely love more cookie contributors! While we don’t require a Dojo Foundation CLA on file to submit cookies, it would be a nice thing to have on hand. (We work to supplement the Dojo site by allowing this static form of mini tutorial, and would love to see the better stuff aggregate back into the “official” channels) … Otherwise, just start writing! Short and sweet, fill in your profile information, and submit a story. Hope to hear more.

  5. gtducati Says:

    Pete,

    Sorry to msg you on this channel. I have a cookie ready … where/how to send?

    Thanks,
    Gerald

  6. dante Says:

    Feel free to contact me directly. dante [at] dojotoolkit.org — We’ll get you all in order. We need to clarify the submission guidelines overall I think:
    http://dojocampus.org/content/dojocampus-author-guidelines/

    It basically says “contact us somehow” … ;)

    Looking forward to your cookie.

  7. SitePen Blog » DOM Attributes and The Dojo Toolkit 1.2 Says:

    [...] more information on dojo.style, my friend and colleague Peter Higgins has an excellent article at Dojo [...]

Leave a Reply

You must be logged in to post a comment.