Home      Products & Services      Contact Us      Links

WebHatchers will design & develop your site for you.

Website Menu Heaven: menus, buttons, etc.

Send us your questions.

site search by freefind

SEO, Google, Privacy
   and Anonymity
Browser Insanity
Popups and Tooltips
Free Website Search
HTML Form Creator
Buttons and Menus
Image Uploading
Website Poll
IM and Texting
   or Not MySQL
Personal Status Boards
Content Management
Article Content
   Management Systems
Website Directory
   CMS Systems
Photo Gallery CMS
Forum CMS
Blog CMS
Customer Records
   Management CMS
Address Book CMS
Private Messaging CMS
Chat Room CMS
JavaScript Charts
   and Graphs

Free Personal Status Boards (PSB™)

Free Standard Free PSB

Free PSB Pro Version

Free Social PSB

Free Social PSB Plus (with Email)

Free Business PSB

Free Business PSB Plus (with Email)

PSB demo

Social PSB demo

Business PSB demo

So what's all this PSB stuff about?

Chart comparing business status boards

PSB hosting diagram

PSB Licence Agreement

Copyright © 2002 -
MCS Investments, Inc. sitemap

PSBs, social networking, social evolution, microcommunities, personal status boards
PSBs, social networking, business personal status boards
website design, ecommerce solutions
website menus, buttons, image rotators
Ez-Architect, home design software
the magic carpet and the cement wall, children's adventure book
the squirrel valley railroad, model railroad videos, model train dvds
the deep rock railroad, model railroad videos, model train dvds

Style Changes with the W3C DOM

stylechangeswithw3cdom.html is 6K. Below are the CSS style properties that get changed W3C DOM style in this test file. The final style—classname—isn't really a style property but a basic node property, an object property, and the value of the class attribute for a node.

There are 34 functions and 34 buttons on this web page. Notice that every one of these functions (all of which get passed two parameters and use the getElementById() method) and every one of these input button tags (all of which contain button values and onClick event handlers with parameters) are simple one-liners. So if you thought this stuff was going to be hard, forget it.

The W3C DOM doesn’t use direct dot syntax descending from the document object anymore—like in the older proprietary DOMs from IE and Nutscape. Slap an id on an object and from then on directly address—and manipulate—the object’s property values. This is the way JavaScript code is going to be written from now on. It’s here, it’s near, get used to it!

Here are CSS style properties we deal with on this web page. There are other object properties beside these that you can do the same thing with.

























class (not a style)

Note in the function below that the className property has no style attribute indicated, but just itself, because in a node such as div there can be both class and style attributes, but not mixed as a style class or class style. The function below will change the class of anything that allows class as an attribute. (But if you plan to use this for your dynamic web page changing, make it exclusive: don't mix it with other types of DOM object property changers, because if you do it will often fail since changes made by your other functions not changing class are likely to be more specific and therefore the winners in any cascading rules face-off.) The other properties above—like the one about font-size—are style property values. Below are both the font-size and the class functions for you to compare.

function changeclass(e,c){document.getElementById(e).className=c;}

function fontsize(e,c){document.getElementById(e).style.fontSize=c;}

However, the way the two functions above use getElementById() for dynamic style changes isn't the normal way of doing it. The normal way is to use the object.style.property way, e.g.:e = document.getElementById(i); e.style.left = '444px'; e.style.top = '333px';. Or in the case of the className example, the object.property way.

Below are the CSS styles for a div, the function that changes styles, and a div with an image that includes an event handler that calls the function, and they represent the normal way to get an element by its id. Why are the 34 functions on the stylechangeswithw3cdom.html page doing it the less common way? Because it’s the best way if you're going to need only one style change from an element. The 34 one-liners are compact, short, and simple, and they're all one needs if only one style will be changed for a particular element. But if you need to change more than one style, then use code like what you'll find below:

.b {position:absolute; left:400px; top:300px; width:72px; height:28px;} // style

function messwithimage(i,j){ // JavaScript function

var e = document.getElementById(i);

e.style.left = '444px';

e.style.top = '333px';

e = document.getElementById(j);

e.style.width = '200px';


<div id="divbox" class="b"><img src="n101.jpg" id="im" width="72" height="28" onClick="javascript:messwithimage('divbox','im'); return true;"></div> <!-- HTML image in div -->

Note that the call to the function is passing two parameters: the id of the div and the id of the image. First the position of the div (with the image in it) is moved, and then the size of the image is increased. (Increasing the div size would have no effect.) But what got changed and how isn't the real point here. The point we wish to make with this example is to show the object.style.property way of property value changing. This way—the standard one—of dynamic element changing gets the element/object/node and stores the object in variable e. This object variable holds the object properties and their values. When the style attribute is to be addressed and the object properties altered, use the style object: object.style.property, as in e.style.height above, as a general rule.

Note that we put the class changing button before the font color changing button on the web page, because it didn’t work the other way around, since id is more specific than class, and we must set up the order of CSS rules according to specificity.

Observe also that the final button—padding-right—operates differently on Netscape than on IE. The former adds the padding to the dimensions of the box, while the latter incorrectly (in IE 5.5) moves the text inside the box over and leaves the box dimensions alone. However much we like the convenience of the latter approach, the Netscape method is correct. (Dang it . . .)

<INPUT TYPE="button" VALUE="padding-right" onClick="paddingright('t','22px');">

And finally, check out the fact that the id of the div is "t" but the id of the span inside the div is "t2" so—yes—you are allowed to have containers inside containers and ids inside containers with different ids. Again, the specificity rule wins out, since defining how the 2 should be styled with a span immediately surrounding the 2 addresses the 2 more specifically than the div styles, classes, and ids that are nearby.

<DIV ID="t" class="initialclass" STYLE="position:absolute; left:300px; top:100px; width:200px; height:200px; border:2px solid #000; font:bold 48px Arial, sans serif;"><br>E=mc<span id="t2">2</span></DIV>