<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js special effect </title>
<! -- <Link id = "link1" rel = "stylesheet" type = "text/css" href = "css1.css"/> -->
</Head>
<Script>
Function setColor (color ){
Var oDiv = document. getElementById ("div1 ");
ODiv. style. background = color;
}
</Script>
<Style>
# Div1 {
Width: 100px;
Height: 100px;
Border: 1px solid black;
}
</Style>
<Body>
<Input type = "button" value = "Change div color" onclick = "setColor ('green')"/>
<Input type = "button" value = "Change div color" onclick = "setColor ('red')"/>
<Input type = "button" value = "Change div color" onclick = "setColor ('black')"/>
<Div id = "div1"> </div>
</Body>
</Html>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> js special effect </title>
<! -- <Link id = "link1" rel = "stylesheet" type = "text/css" href = "css1.css"/> -->
</Head>
<Script>
Function setStyle (name, value ){
Var oDiv = document. getElementById ("div1 ");
ODiv. style [name] = value;
}
</Script>
<Style>
# Div1 {
Width: 100px;
Height: 100px;
Border: 1px solid black;
}
</Style>
<Body>
<Input type = "button" value = "widening color" onclick = "setStyle ('width', '400px ')"/>
<Input type = "button" value = "Greater" onclick = "setStyle ('height', '400px ')"/>
<Input type = "button" value = "change color" onclick = "setStyle ('background', 'green')"/>
<Div id = "div1"> </div>
</Body>
</Html>