How to Change the View With JavaScript

JavaScript lets you dynamically change the CSS in your pages, so you can manage views after the user loads the page in the Web browser. You can change colors, location of HTML elements, visibility and accessibility of each element on the Web page. You create a function and change the CSS property based on user input, or you can automatically change views when the page loads.

Instructions

1. Right-click the HTML file you want to manage and click "Open With." Click the HTML editor listed to open the code in the editor.

2. Add a JavaScript section to your file. All of your JavaScript code must be contained within the "script" tags. Add the following code to your file:

   <script type="text/javascript"> </script>

3. Add the functions to change the HTML view. You can change one or several aspects of the page. For example, if you want to change the background color, use the following code:

   function changeBG() {
   document.bgColor = "#000000";
   }

   The code above changes the view to a black background.

4. Add a button or link the user clicks to change the view. The following code creates a button that changes the color using the JavaScript function created in step three:

   <input type="button" value="Change Background" onclick="changeBG()">

5. Save the changes and open the file in a Web browser. Click the button to change the background and test the code.

References

• Web Coding Tech: Change the Background Color of the Page