Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-12
<< previous
|
next >>
Another example of Simple DOM manipulations
We can show, hide, and change the style properties via Javascript
Example 8.11
Example 8.11 Source:
<table width="100%" > <tr> <td>Description Align: <ul> <li><a href="javascript:align('right')" >right</a> </li> <li><a href="javascript:align('left')" >left</a> </li> <li><a href="javascript:align('justify')" >justify</a> </li> </ul> </td> <td>Show/Hide Description: <ul> <li><a href="javascript:hidedesc()" >Hide</a> </li> <li><a href="javascript:showdesc()" >Show</a> </li> </ul> </td> <td>Background-color: <ul> <li><a href="javascript:backgroundcolor('#f66')" >red</a> </li> <li><a href="javascript:backgroundcolor('#66f')" >blue</a> </li> <li><a href="javascript:backgroundcolor('#6f6')" >green</a> </li> <li><a href="javascript:backgroundcolor('#ff6')" >yellow</a> </li> </ul></td> </tr> </table> <div style="border: thin solid black; padding: 0px 20px 20px;" > <div id="cscisl" > <h1>Advanced Website Development Using XML</h1> <p> Harvard Extension School, Summer 2007 <br/> CSCI S-L <br/> Tuesdays and Thursdays, 6 to 8:30 pm </p> <p id="description" > This course focuses on using XML technologies in website development. Fundamental technologies relating to XML, such as XPath, XSL, XSLT, XSL-FO, XML Schemas, DTDs, SAX, and DOM, are emphasized. In addition, specific markup languages relevant to website development, such as XHTML, SVG, RSS, XHTML Mobile Profile, WML, and DocBook, are covered. These technologies, coupled with the open-source XML publishing framework Cocoon, are used to develop dynamic, database-driven sites that deliver content in a variety of media types (XHTML, text, PDF, graphics) for a variety of devices (desktops, handhelds, cellular phones) and audiences. </p> </div> </div>
In
example11.js
function align(val) { node = document.getElementById('description'); node.setAttribute('align',val); } function hidedesc () { node = document.getElementById('description'); node.setAttribute('style','display: none;'); } function showdesc () { node = document.getElementById('description'); node.setAttribute('style','display: block;'); } function backgroundcolor(color) { node = document.getElementById('cscisl'); node.setAttribute('style','background-color: '+ color + ';'); }
In
head
element:
Example 8.11 Demonstrated
Table of Contents
|
All Slides
|
Link List
|
Examples
|
CSCI E-12
<< previous
|
next >>