ShowTable of Contents
Have you ever wished you could set the style of an element programmatically, well using dojo.style now you can. Dojo has many tools available to manipulate the DOM programmatically. While you have always been able to do this with JavaScript, sometimes it takes quite a bit of code to do so. While I'm just starting to delve into dojo I have found a method that is a great way of manipulating the style of DOM elements programmatically. By using dojo.style you can get and set the styles on the fly when something occurs (i.e. a click, a page reload, etc.). This makes it possible to have sort of "logic driven" CSS if you will.
dojo.style accepts 3 different parameters depending on what you want to do:
* The ID of the NODE, you can use dojo.byId or just hard-code it or use a variable
* The style parameter you want to get or change (i.e. position, margin, padding, etc.). This can also be an array of elements
* What you want to set the style parameter to
Get the style of a DOM Node
Say you want to get the current style of a DOM Node. You would simply do something like this:
dojo.style("ID-Of-DOM-NODE","margin-top");
This would return what the value of "margin-top" is for the ID-Of-DOM-NODE element on the page.
Set the style of a DOM Node
So now you want to set the style of a DOM Node on the page. You would do this:
dojo.style("ID-Of-DOM-NODE","margin-top","5px");
You can also set many style elements by passing in an array:
dojo.style("ID-Of-DOM-NODE",{
"margin-top":"5px",
"padding-left":"2px",
"padding-right:"2px"
});
Summary
This comes in really handy when adjusting the position of elements on the page or when you need to change the style of an element when something happens. Using just a CSS file you can't do this. I think this is a great asset and not to mention it's very easy to do. Start combining this with dojo.coords, dojo.query and getClientId and you've got yourself a very powerful way of manipulating the style of DOM Nodes within an XPage or even pre-XPage web pages if you're willing to go the distance to include dojo support.
Visit
keithstric.com
for other Lotus Notes/Domino/XPage articles