Skip to main content link. Accesskey S
  • Help
  • HCL Logo
  • HCL Notes and Domino Application Development wiki
  • THIS WIKI IS READ-ONLY. Individual names altered for privacy purposes.
  • HCL Forums and Blogs
  • Home
  • Product Documentation
  • Community Articles
  • Learning Center
  • API Documentation
Search
Community Articles > Designing Applications > Designing XPage Applications > Using dojo.style to adjust the style of DOM Nodes
  • Share Show Menu▼
  • Subscribe Show Menu▼

Recent articles by this author

The JSON RPC Service

Use the JSON RPC Service included in the Extension Library to communicate with the server from Client Side Javascript in an XPage

Using dojo.style to adjust the style of DOM Nodes

Have you ever wished you could set the style of an element programmatically, well using dojo.style now you can.

Get the browser window Height and Width

Get a browser window height and width These client side JavaScript functions will return the height and width of the browser window content area. This is useful when doing graphics operations with a javascript library like Dojo, Moo Tools, jQuery, etc. Window Height  The height of the ...

Various Time Differences in JavaScript

Various Time Differences Find the difference in 2 datetimes by day, hour, minutes and seconds.   Get the time difference between 2 dates in days  function timeDayDifference(endDate,startDate) {   var difference endDate.getTime() startDate.getTime();   difference ...
Community articleUsing dojo.style to adjust the style of DOM Nodes
Added by ~Dana Xankroikle | Edited by ~Dana Xankroikle on March 24, 2010 | Version 20
  • Actions Show Menu▼
expanded Abstract
collapsed Abstract
Have you ever wished you could set the style of an element programmatically, well using dojo.style now you can.
Tags: Dojo, Javascript
ShowTable of Contents
HideTable of Contents
  • 1 The Power
    • 1.1 Get the style of a DOM Node
    • 1.2 Set the style of a DOM Node
  • 2 Summary
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.
 

The Power

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.comexternal link for other Lotus Notes/Domino/XPage articles


  • Actions Show Menu▼


expanded Attachments (0)
collapsed Attachments (0)
Edit the article to add or modify attachments.
expanded Versions (20)
collapsed Versions (20)
Version Comparison     
VersionDateChanged by              Summary of changes
This version (20)Mar 24, 2010, 3:23:39 PM~Dana Xankroikle  
19Mar 24, 2010, 3:21:14 PM~Mary Reluveroden  
18Mar 24, 2010, 3:20:35 PM~Mary Reluveroden  
17Mar 24, 2010, 3:20:13 PM~Mary Reluveroden  
16Mar 24, 2010, 3:19:44 PM~Mary Reluveroden  
15Mar 24, 2010, 3:19:14 PM~Mary Reluveroden  
14Mar 24, 2010, 3:18:52 PM~Mary Reluveroden  
13Mar 24, 2010, 3:17:26 PM~Mary Reluveroden  
12Mar 24, 2010, 3:16:31 PM~Mary Reluveroden  
11Mar 24, 2010, 3:15:44 PM~Mary Reluveroden  
10Mar 24, 2010, 3:14:46 PM~Mary Reluveroden  
9Mar 24, 2010, 3:10:20 PM~Mary Reluveroden  
8Mar 24, 2010, 3:09:58 PM~Mary Reluveroden  
7Mar 24, 2010, 3:09:41 PM~Mary Reluveroden  
6Mar 24, 2010, 3:09:10 PM~Mary Reluveroden  
5Mar 24, 2010, 3:01:20 PM~Mary Reluveroden  
4Mar 24, 2010, 3:00:43 PM~Mary Reluveroden  
3Mar 24, 2010, 2:58:18 PM~Mary Reluveroden  
2Mar 24, 2010, 2:57:32 PM~Mary Reluveroden  
1Mar 24, 2010, 2:28:29 PM~Mary Reluveroden  
expanded Comments (0)
collapsed Comments (0)
Go ElsewhereStay ConnectedAbout
  • HCL Software
  • HCL Digital Solutions community
  • HCL Software support
  • BlogsDigital Solutions blog
  • Community LinkHCL Software forums and blogs
  • About HCL
  • Privacy
  • Accessibility
Link to this article x
Copy and paste this wiki markup to link to this article from another article in this wiki.
●Close