In many cases, it is necessary to dynamically modify the style of the elements on the page. There are several ways to modify the style dynamically in JavaScript, and the use, effects, and flaws of the method are described below.
1. Use Obj.classname to modify the class name of the style sheet.
2, use Obj.style.cssTest to modify the embedded CSS.
3. Use Obj.classname to modify the class name of the style sheet.
4. Change the CSS of an element by using a CSS file that changes the outer union
Here is an HTML code and CSS code to explain the difference between the above methods.
Css
?
1234567 |
.style
1
{
margin
:
10px auto ;
background-color
:
#9999FF
;
display
:
block
;
color
:White;
border
:
1px solid white
;
padding
:
10px 25px
;
font-size
:
18px
; }
.style
1:
hover{
background-color
:
#66B3FF
;
cursor
:
pointer
;}
.style
2
{
margin
:
10px auto ;
background-color
:
gray
;
display
:
block
;
color
:
black
;
border
:
1px solid white
;
padding
:
10px 25px
;
font-size
:
18px
; }
.style
2:
hover{
background-color
:
black
;
color
:White;
cursor
:
pointer
}
|
Html
?
123456789 |
<
div
>
<
input id
=
"btnB" type
=
"button" name
=
"btnLogin" value
=
"登录" class
=
"style1" />
<
div id
=
"tool"
>
<
input type
=
"button" value
=
"【obj.style.className】更改样式" onclick
=
"changeBackgroundColor()"
/>
<
input type
=
"button" value
=
"【obj.style.cssText】更改样式" onclick
=
"changeFontSize()" />
<
input type
=
"button" value
=
"【obj.className】更改样式" onclick
=
"addRadius()" />
<
input type
=
"button" value
=
"更改外联css样式" onclick
=
"recover()" />
</
div
>
</
div
>
|
Method One, use Obj.classname to modify the class name of the style sheet
From the code below you can see how ob.style.cssTest is used to BTNB the style.
?
12345 |
function changeStyle1() { var obj = document.getElementById( "btnB" ); obj.style.backgroundColor= "black" ; } |
The code modifies the color of the BTB text, opens the debugging tool in the browser, and discovers that the BTB tag has one more attribute "style=" inline > Out-of-union. and BTB Hove pseudo-class Background-color style is written in the inline, so the embedded Background-color cover the Pseudo-class, which makes the mouse into the BTB can not feel the background color changes.
Method two, using Obj.style.cssTest to modify the embedded CSS
Directly on the JavaScript code:
?
12345 |
function changeStyle2() { var obj = document.getElementById( "btnB" ); obj.style.cssText = " display:block;color:White; } |
The code and the "one" in the same effect, the flaw is the same.
Method Three, use Obj.classname to modify the class name of the style sheet
Use the code to modify the class name of the BTB reference style, as in the following snippet:
?
12345 |
function changeStyle3() { var obj = document.getElementById( "btnB" ); //obj.className = "style2"; obj.setAttribute( "class" , "style2" ); } |
There are two ways to change the style class name by changing the way the class name of the bTB CSS is changed. 1, Obj.classname = "Style2"; 2, Obj.setattribute ("Class", "Style2"), all the same effect.
Modifying the CSS in this way is much better than the above effect.
Method Four, change the CSS of an element by using a CSS file that changes the outer union
It is easy to change the style of the BTB by changing the external CSS file reference. The code is as follows:
First you have to refer to the external CSS file, the code is as follows:
?
123456 |
<link href= "Css1.css" rel= "stylesheet" type= "text/css" id= "CSS" /> function changestyle4 ( { &NBSP;&NBSP;&NBSP; var obj = document.getElementById ( "CSS" &NBSP;&NBSP;&NBSP; obj.setattribute ( "href" "css2.css" &NBSP; |
This can also easily change the style of the BTB, the personal feel that this is the best way to achieve the overall page skin change the best solution.
Javascript_ dynamic modification of CSS style methods summary