138Part IIJavaScript Tutorialhigher degree of dynamism is possible (Web hosting mysql)
138Part IIJavaScript Tutorialhigher degree of dynamism is possible in your applications. Dynamic HTML is a very deepsubject, with lots of browser-specific peculiarities. In this final section of the tutorial, youwilllearn techniques that work in all W3C DOM-compatible browsers. I ll focus on two of themost common tasks for which DHTML is used: changing element styles and modifying Bodycontent. Changing stylesheet settingsEach element that renders on the page (and even some that don t) has a property calledstyle. This property provides script access to all Cascading Style Sheet (CSS) propertiessupported for that element by the current browser. Property values are the same as thoseused for CSS specifications frequently a different syntax than similar settings that used tobe made by HTML tag attributes. For example, if you wish to set the text color of a quote ele- ment whose ID is FranklinQuote, the syntax isdocument.getElementById( FranklinQuote ).style.color = rgb(255, 255, 0) ; Because the CSS colorproperty accepts other ways of specifying colors (such as the tradi- tional hexadecimal triplet #ffff00), you may use those as well. Some CSS property names, however, do not conform to JavaScript naming conventions. Several CSS property names contain hyphens. When that occurs, the scripted equivalent ofthe property compresses the words together and capitalizes the start of each word. Forexample, the CSS property font-weightwould be set in script as follows: document.getElementById( highlight ).style.fontWeight = bold ; A related technique puts more of the design burden on the CSS code. For example, if youdefine CSS rules for two different classes, you can simply switch the class definition beingapplied to the element by way of the element object s classNameproperty. For example, let ssay you define two CSS class definitions with different background colors: .normal {background-color: #ffffff} .highlighted {background-color: #ff0000} In the HTML page, the element first receives its default class assignment as follows:
…
A script statement can then change the class of that element object so that the highlightedstyle applies to it: document.getElementById( news ).className = highlighted ; Restoring the original class name also restores its look and feel. This approach is also a quickway to change multiple style properties of an element with a single statement. Dynamic content via W3C DOM nodesIn Chapter 8 you met the document.createElement()and document.createTextNode() methods. These methods create new DOM objects out of thin air, which you may then modifyby setting properties (attributes) prior to plugging the new stuff into the document tree forall to see. As an introduction to this technique, I ll demonstrate the steps you would go through toaddan element and its text to a placeholding spanelement on the page. In this example, a