Overview of CSS Styling with JavaScript+DOM

CSS styling has become very dominant in Web and general application development. CSS has become the styling agent not just for HTML but also ASP, Flex, Java, JSP, PHP, plus a dozen other Web tools. It certainly helps that CSS syntax and rules of usage are reasonably simple [though anyone who has mastered CSS selectors or display or position without a cheatsheet is hardcore].

But of equal impact is the fact that styling has gone dynamic. Web 2.0 developers can use JavaScript to detect where and how a page is being used and to change the styling [and layout] depending on the users usage patterns. The first demo tab will show a simple across the board style change to an HTML tag. Then the second demo tab will do a more sophisticated set of changes based on users selections from dropdown combo boxes. Because just about every HTML tag has a full range of styling options, this tutorial "proves" it is possible to dynamically style just about any Web page element.

In this first demo, the color of H2 tags are changed

The basic routine used is astyling.js which is an Apple developers offering. The routine has beeen generalized to handle both style changes by Tag or by Tag Id. In this demo the routine looks up and then changes all H2 tags for the style.color property. A dropdown combo allows selecting among five colors as follows:

Setting Styles in JavaScript

The above H2 statement will have its color changed [also, as you shall see, any other H2 tags used on this Web page].
red green blue yellow black magenta Choose a color
Change H2 Font color

the call is fairly simple: setStyleByTag('H2','color',coloropt,1);
the first parameter - sets what tag to change the styling for;
the second parameter - sets the styling option to change;
the third parameter - sets the new property value, the color option picked up from the drop down combo;
the last parameter = sets whether to 1=do changes for all tags in the document; 0=local childs only.
Wth this one can see how simple it is to manage styling changes with the right JavaScript routines.

JavaScript CSS Styling by DOM Tag Id

The advantage of this method is that a specific tag can be targetted for a style change. Yes, the astyle.js routine uses a document.getElementById(idname) call to implement the style change. The coding is simplified because the routine should not have an array of several ids to handle - the idname should be unique. So the boxed statement below will be styled depending on the font property chosen from the pulldown. Try it.
fontFamily fontSize fontStyle fontWeight textDecoration Select the Font property you want to change from this pulldown
Open Styling Dialog Then click here to open a dialog to make the changes

---

The coding for these Tag Id styling changes is contained in onClick and onChange event handlers which in turn call routines in the astyling.js main script. There are 4 events:
1)onChange='popopt=document.getElementById("fontchoice").options[selectedIndex].text;' - captures the combo pulldown choice of font change to be made;
2)onClick='setStyleById("dialog","display", "inline"); document.getElementById("details").innerHTML = document.getElementById(popopt).innerHTML;' - respond to a click on the Open Styling Dialog button. Note what we are doing - making visble the specific Font Select options chosen by the user;
3)onChange='var who=document.getElementById("details");setStyleById("stylee",popopt,who.options[selectedIndex].text);' - changes the block of text's styling depending on the styling combo choice;
4)onClick='setStyleById("dialog","display", "none");' - closes the Styling Popup Dialog and hides the HTML.
The coding is a little tricky but easy to debug with Firebug or use of alerts().

Results and Summary

Because just about every HTML tag allows a style= option, CSS styling applies to almost all of HTML. And as can be seen here making changes to CSS stylings is fairly straight forward. The only tricky part comes when a TAG is used because then an array of items ch may require setting. Think in terms of an items(i).style[property] array of values. The astyle.js routine used here is quite general and allows for changes by Tag, Tag Id or CSS Class name. It also supplies get() routines for finding specific stylings.

But of even greater import is the fact that in Web 2 applications styling has become context sensitive and dynamic. JavaScript routines and frameworks allow users to style pages, sections of a page and widget contents depending on what the user is doing and signalling with event triggers and button clicks. This is a far cry from static HTML and CSS of less than a decade ago. Not only the stucture but the styling of Web pages has gone dynamic.

Quick review of using Spry tabs for this Page
So far in our testing we have had no crosstalk problems between the diferent JavaScript routines. So this is our assessment so far:
Whats Hot!!
1)Collapsing panels so all tabs can be hidden;
2)Auto height so each tab fits eaxctly to its content;
3)Dynamic expanding of the tab header if the tabs exceed the header width;
4)No trouble handling very wide tab titles;
5)Dynamic expanding of any tab panel if more HTML is inserted or revealed.
Whats NOT!
1)if there is no JavaScript [or an error in the JS code], the HTML spills out of order;
2)no themes or color control - its DIY.
3)Like other AJAX frameworks - debugging unbalanced DIV tags is no fun;
4)If there was a resizable, movable, closable Spry popup dialog I would have used it instead of my makeshift popup