We've established that objects and elements in the DOM structure of an html page can be manipulated using JavaScript. As the title implies JavaScript can also change CSS class properties, behavior and style. The objects and/or elements are identified in JavaScript by "getElementById" or "getElementByClassName" and then changes can be applied.
There's a JavaScript function "toggleClass" that allows you to "toggle" between css styles by using class names and element ids. This next widget demonstrates this toggle effect.
Clicking the buttons will change the apearance of this sentence.
We can further affect the CSS of the above widget using JavaScript. Click the buttons below to make it disapear.
In this example we use a JavaScript function to change the text and appearance of the following object.
Hover the mouse over me!
Here's all the code behind the previous examples:
The HTML:
The CSS:
The JavaScript
