Javascript changes CSS styles of local and global

One, local change style

There are three ways: directly change the style, change the className, and change the cssText

Change className: document.getelementbyid ('obj'). ClassName ="..."

Change cssText: document.getelementbyid ('obj').style.csstext ="width:20px; Border: solid 1 px # f00;" ;

Change the direct style: document.getelementbyid ('obj'). Style. BackgroundColor ="#003366"

Two, global change style

By changing the href value of the outer link style, the page style can be switched in real time, that is, "changing the template style".

You first need to give an id to the target that you want to change, such as

 
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" /> 

It's very simple to call, like

 
<span onclick="javascript:document.getElementById('css').href='ie.css'"> Click me to change the style </span>