Home > Developer > JavaScript
You can change the display style of a button to achieve dynamic button sliding.
Copy codeThe Code is as follows:
<! 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> untitled document </title>
</Head>
<Style>
. Search {background: #008800; color: # fff; border: none; height: 26px; line-height: 20px; width: 63x ;}
. Searchhover {background: #000099; color: # fff; border: none; height: 26px; line-height: 20px; width: 63px ;}
</Style>
</Head>
<Body onload = "js ()">
<Input type = "button" id = "btn" class = "search" name = "btn" value = "login"/>
<Input type = "button" id = "btn2" class = "search" name = "btn" value = "NOTE"/>
<Script type = "text/javascript">
Function js ()
{
// Enable ie6 button to support the hover attribute. obj indicates that the entity hover to support hover is btn: hover's style, and init is the initial style.
Obj = "btn ";
Alert (navigator. appName );
If (navigator. appName = "Microsoft Internet Explorer" & parseFloat (navigator. appVersion) = 4) {// judge ie6
Var o = document. getElementsByName (obj );
For (var I = 0; I <o. length; I ++ ){
If (o [I]. type = "button "){
// O [I]. className = "search ";
O [I]. onmouseover = function () {this. className = "searchhover "}
O [I]. onmouseout = function () {this. className = "search "};
}
}
}
}
</Script>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
