Difference between revisions of "JavaScript and CSS - Dynamic Styles and Layers"
(→Making Basic Dynamic Style Changes using JavaScript and CSS) |
(→Making Basic Dynamic Style Changes) |
||
| Line 4: | Line 4: | ||
== Making Basic Dynamic Style Changes == | == Making Basic Dynamic Style Changes == | ||
| + | |||
| + | The W3C DOM (Document OIbject Model) provides a powerful mechanism for dynmically controlling the styles used in a web page. Using JavaScript the style of any element can be changed via the properties of that element's ''style'' object. | ||
| + | |||
| + | Suppose we have the following HTML: | ||
| + | |||
| + | <pre> | ||
| + | <P id="introtext>This is some introductory text</p> | ||
| + | <pre> | ||
| + | |||
| + | We can very easily change the color of this text from JavaScript. The first step is to access the element using the ''getElementById()'' method of the document object (see | ||
Revision as of 18:30, 17 May 2007
In the previous chapter (Understanding Cascading Style Sheets (CSS)) we learned about the basics of Cascading Style Sheets (CSS). If you are not familar with CSS it is recommened that you take some time to review the previous chapter.
In this chaptyer we will begin to explore making dynamic style changes to web page using JavaScript and CSS. We will being withj some simple change such changing the color text before moving on to more complex tasks such as hiding, showing and moving blocks of content.
Making Basic Dynamic Style Changes
The W3C DOM (Document OIbject Model) provides a powerful mechanism for dynmically controlling the styles used in a web page. Using JavaScript the style of any element can be changed via the properties of that element's style object.
Suppose we have the following HTML:
<P id="introtext>This is some introductory text</p> <pre> We can very easily change the color of this text from JavaScript. The first step is to access the element using the ''getElementById()'' method of the document object (see
