Java Script Lecture 7 Rachel A Ober roberccs

Java. Script Lecture 7 Rachel A Ober rober@ccs. neu. edu

Changing CSS with Java. Script As we have seen before, we can access and change HTML elements with Java. Script. We can also access style data from these elements using Java. Script and change how they are displayed on the page.

How to Access Style Information var border. Color = document. get. Element. By. Id(“box 1”). style. borde r. Color This will access information about the box's border color.

How to Change it function change. Border. Color() { document. get. Element. By. Id(). style. border. Color = “#FFFFFF” } This is assuming we have a button somewhere on the page to click that runs this function. When the button is clicked, it will change the border to white. Remember to put values in quotes!

CSS Names vs Java. Script Names Style attributes in Java. Script are very similar to their equivalent CSS name. For the most part, if the CSS name has a hyphen in it, remove the hyphen and capitalize the second word to get the Java. Script attribute. In CSS you'd define. . . color: background-color: border: In Java. Script it is equivalent to. . . color: background. Color: border:

Let Your User Pick the Style Another cool thing you can do is have multiple style sheets for your site. For example, your default might just be black and white, but if your user clicks a button, you can switch out the style sheet and make it appear blue and red instead!

Lab #6: Changing Style Attributes http: //cpu. rachelober. com/lab 6 Objective: Use what we’ve learned about CSS and Java. Script and integrate them to create a comprehensive web site. Begin to make your personal web site.