Advanced DHTML DOM Manipulating Styles with Java Script

Goals By the end of this lecture you should … • Understand how to

Updating CSS using Java. Script • We’ve already seen that we can dynamically change

The XHTML ID Attribute • To change properties using Dynamic CSS, we must first

Specifying an ID Attribute <html> <head> <title>ID Sample</title> </head> <body> <p id=“simple”> He’s pining

document. get. Element. By. Id() • We use document. get. Element. By. Id() to

Open the file called java. Script. CSS_01. html Copyright © 2005 Department of Computer

The style Object • In the previous example, we saw our first example of

Some CSS Equivalents CSS font-size font-weight font-family font-style text-decoration color background-image Java. Script font.

The visibility Attribute • The visibility attribute specifies whether a layer is visible to

Open the file called java. Script. CSS_02. html Copyright © 2005 Department of Computer

Open the file called java. Script. CSS_03. html Copyright © 2005 Department of Computer

Moving Objects Created as Layers • To move an object created as a layer

Open the file called java. Script. CSS_04. html Copyright © 2005 Department of Computer

Open the file called java. Script. CSS_05. html Copyright © 2005 Department of Computer

Summary • In order to create a reference to an object created by XHTML,

Summary • We can update CSS styles using the Java. Script style object. •

Resources • Heinle, Nick & Bill Peña. Designing With Java. Script: Creating Dynamic Web

Slides: 19

Download presentation

Goals By the end of this lecture you should … • Understand how to use the XHTML id attribute. • Understand how to use the document. get. Element. By. Id() method to access objects created by XHTML. continued … Copyright © 2005 Department of Computer & Information Science

Goals By the end of this lecture you should … • Understand how to use the Java. Script style object to update CSS styles. • Understand how to use Java. Script to manipulate layers created by XHTML and CSS. Copyright © 2005 Department of Computer & Information Science

Updating CSS using Java. Script • We’ve already seen that we can dynamically change properties of objects explicitly created by HTML. • We can also change properties for an entire group of tags established by CSS! Copyright © 2005 Department of Computer & Information Science

The XHTML ID Attribute • To change properties using Dynamic CSS, we must first be able to uniquely identify objects created by HTML. To do this, we use the id attribute. • We assign each tag a unique value for the id attribute. That value makes the element to which it is attached a recognizable object for Java. Script. Copyright © 2005 Department of Computer & Information Science

Specifying an ID Attribute <html> <head> <title>ID Sample</title> </head> <body> <p id=“simple”> He’s pining for the fjords! </p> </body> </html> Copyright © 2005 Department of Computer & Information Science

document. get. Element. By. Id() • We use document. get. Element. By. Id() to establish the connection between an HTML element and Java. Script. • We pass an id attribute’s value to document. get. Element. By. Id() in order to make the connection. We pass the value as a string; the method returns an object type. Copyright © 2005 Department of Computer & Information Science

The style Object • In the previous example, we saw our first example of updating CSS styles using Java. Script. To do so, we call upon a Java. Script attribute object called style. • The style object always takes a string value! Copyright © 2005 Department of Computer & Information Science

Some CSS Equivalents CSS font-size font-weight font-family font-style text-decoration color background-image Java. Script font. Size font. Weight font. Family font. Style text. Decoration color background. Color background. Image Copyright © 2005 Department of Computer & Information Science

The visibility Attribute • The visibility attribute specifies whether a layer is visible to the user. • The layer takes one of two values: visible or hidden. • Using Java. Script, we can adjust the visibility attribute to show or hide a layer. Copyright © 2005 Department of Computer & Information Science

Moving Objects Created as Layers • To move an object created as a layer using the <div> element, we can use Java. Script to adjust the top and left attributes. • When we create a layer to move, we need to set the position attribute to “absolute. ” Copyright © 2005 Department of Computer & Information Science

Summary • In order to create a reference to an object created by XHTML, we must create XHTML objects with id attributes. • We can use the document. get. Element. By. Id() method to create a reference to an object created by XHTML. continued … Copyright © 2005 Department of Computer & Information Science

Summary • We can update CSS styles using the Java. Script style object. • In order to reveal or hide layers created using XHMTL and CSS, we need to dynamically update the visibility attribute. • To dynamically move layers created by XHTML and CSS, we need to use Java. Script to update the top & left CSS attributes. Copyright © 2005 Department of Computer & Information Science

Resources • Heinle, Nick & Bill Peña. Designing With Java. Script: Creating Dynamic Web Pages. Sebastopol, CA: O’Reilly & Associates, 2002. • Spain-Mc. Duffie, Tina. Java. Script Concepts & Techniques: Programming Interactive Web Sites. Wilsonville, OR: Franklin, Beedle & Associates, 2003. Copyright © 2005 Department of Computer & Information Science