Presentation is loading. Please wait.

Presentation is loading. Please wait.

Copyright ©2005  Department of Computer & Information Science Advanced DHTML & DOM: Manipulating Styles with JavaScript.

Published byJohnathan Cole Modified over 8 years ago

Similar presentations

Presentation on theme: "Copyright ©2005  Department of Computer & Information Science Advanced DHTML & DOM: Manipulating Styles with JavaScript."— Presentation transcript:

1 Copyright ©2005  Department of Computer & Information Science Advanced DHTML & DOM: Manipulating Styles with JavaScript

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

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

4 Copyright ©2005  Department of Computer & Information Science Updating CSS using JavaScript We’ve already seen that we can dynamically change properties of objects explicitly created by HTML.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!We can also change properties for an entire group of tags established by CSS!

5 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.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 JavaScript.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 JavaScript.

6 Copyright ©2005  Department of Computer & Information Science Specifying an ID Attribute <html><head> ID Sample ID Sample </head><body> He’s pining for the fjords! </p></body></html>

7 Copyright ©2005  Department of Computer & Information Science document.getElementById() We use document.getElementById() to establish the connection between an HTML element and JavaScript.We use document.getElementById() to establish the connection between an HTML element and JavaScript. We pass an id attribute’s value to document.getElementById () in order to make the connection. We pass the value as a string ; the method returns an object type.We pass an id attribute’s value to document.getElementById () in order to make the connection. We pass the value as a string ; the method returns an object type.

8 Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptCSS_01.html

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

10 Copyright ©2005  Department of Computer & Information Science Some CSS Equivalents CSSJavaScript font-sizefontSize font-weightfontWeight font-familyfontFamily font-stylefontStyle text-decorationtextDecoration colorcolor background-colorbackgroundColor background-imagebackgroundImage

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

12 Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptCSS_02.html

13 Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptCSS_03.html

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

15 Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptCSS_04.html

16 Copyright ©2005  Department of Computer & Information Science Open the file called javaScriptCSS_05.html

17 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.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.getElementById() method to create a reference to an object created by XHTML.We can use the document.getElementById() method to create a reference to an object created by XHTML. continued …

18 Copyright ©2005  Department of Computer & Information Science Summary We can update CSS styles using the JavaScript style object.We can update CSS styles using the JavaScript style object. In order to reveal or hide layers created using XHMTL and CSS, we need to dynamically update the visibility attribute.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 JavaScript to update the top & left CSS attributes.To dynamically move layers created by XHTML and CSS, we need to use JavaScript to update the top & left CSS attributes.

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

Download ppt "Copyright ©2005  Department of Computer & Information Science Advanced DHTML & DOM: Manipulating Styles with JavaScript."

Similar presentations

Copyright ©2005 Department of Computer & Information Science Advanced DHTML & DOM: Working with the Window Object.

Copyright ©2005 Department of Computer & Information Science Advanced DHTML & DOM: Working with the Window Object.
© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.

© 2010 Delmar, Cengage Learning Chapter 9 Positioning Objects with AP Div Tags.
Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.

Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.
Today CSS HTML A project.

Today CSS HTML A project.
Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.

Web-based Application Development Lecture 9 February 7, 2006 Anita Raja.
Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.

Chapter 16 Dynamic HTML and Animation The Web Warrior Guide to Web Design Technologies.
XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.
 2008 Pearson Education, Inc. All rights reserved. 1 12 Document Object Model (DOM): Objects and Collections.

 2008 Pearson Education, Inc. All rights reserved Document Object Model (DOM): Objects and Collections.
DT228/3 Web Development JSP: Directives and Scripting elements.

DT228/3 Web Development JSP: Directives and Scripting elements.
Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.

Chapter 9 Introduction to the Document Object Model (DOM) JavaScript, Third Edition.
Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,

Tutorial 13 Working with Objects and Styles. XP Objectives Learn about objects and the document object model Reference documents objects by ID, name,
Lecture 13. A Very Brief Introduction to HTML and XHTML, part II Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.

Lecture 13. A Very Brief Introduction to HTML and XHTML, part II Instructor: Jie Yang Department of Computer Science University of Massachusetts Lowell.
DHTML - Introduction Introduction to DHTML, the DOM, JS review.

DHTML - Introduction Introduction to DHTML, the DOM, JS review.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 13 - Dynamic HTML: Object Model and Collections Outline 13.1 Introduction 13.2 Object Referencing.
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.

Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
Tutorial 4 Creating Special Effects with CSS

Tutorial 4 Creating Special Effects with CSS
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.

SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / 2011-03-03 1Chris Greenhalgh.

A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / Chris Greenhalgh.
Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms.

Copyright ©2005  Department of Computer & Information Science Introducing DHTML & DOM: JavaScript & Forms.
CSS 404 Internet Concepts. XP Objectives Developing a Web page and a Website Working with CSS (Cascading Style Sheets) Web Tables Web Forms Multimedia.

CSS 404 Internet Concepts. XP Objectives Developing a Web page and a Website Working with CSS (Cascading Style Sheets) Web Tables Web Forms Multimedia.

Similar presentations

Ads by Google