1. Single-Change style
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">#aaa{Height:100px;width:100px;Background-color:Red; } </style> <Scriptsrc=".. /jquery-3.2.1/jquery-3.2.1.js "type= "Text/javascript"> </Script> <Scripttype= "Text/javascript"> $(function(){ $("#btn"). Click (function(){ $("#aaa"). css ({"Height": $, "width": $, "Background-color":"Yellow" }) }) }) </Script> </Head> <Body> <DivID= "AAA">yo yo yo ~~man,come on! </Div> <inputtype= "button"name= "BTN"ID= "BTN"value= "Press Me to change format" /> </Body></HTML>
The result of this modified style is
--------------》
This way is only a single change CSS style one or more properties
2. Modify the entire set of styles
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">#aaa{Height:100px;width:100px;Background-color:Red; }#bbb{Height:300px;width:300px;Background-color:AliceBlue; } </style> <Scriptsrc=".. /jquery-3.2.1/jquery-3.2.1.js "type= "Text/javascript"> </Script> <Scripttype= "Text/javascript"> $(function(){ $("#btn"). Click (function(){ $("#aaa"). attr ("ID","BBB"); }) }) </Script> </Head> <Body> <DivID= "AAA">yo yo yo ~~man,come on! </Div> <inputtype= "button"name= "BTN"ID= "BTN"value= "Press Me to change format" /> </Body></HTML>
is to convert the entire CSS style code to another CSS style, which transforms the entire style.
07.30 "JQuery"--1.4 modifying CSS Styles