1. Partially change the style
There are three methods: changing the style directly, changing className and changing cssText
Change className: document.getElementById('obj').className="…"
Change cssText: document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";
Change the direct style: document.getElementById('obj').style.backgroundColor="#003366″
2. Globally change the style
Real-time switching of web page styles is achieved by changing the href value of the external link style, that is, "changing the template style".
First, you need to give an id to the target that needs to be changed, such as
Copy the code code as follows:
<link rel="stylesheet" type="text/css" id="css" href="firefox.css" />
It is very simple to call, such as
Copy the code code as follows:
<span onclick="javascript:document.getElementById('css').href='ie.css'">Click me to change the style</span>