JS控制页面样式
.
.
.
.
鼠标悬浮的时候改变文本框和按钮的颜色、背景图片以及链接文字的大小。
<!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=gb2312" /> <title>JS控制CSS</title> <style type="text/css"> <!-- .txtTest { height: 15px; width: 200px; border: thin dashed #0000FF; } .txtOutTest { height: 15px; width: 200px; border: thin dashed #FF6600; } .btnSub { background-image:url(back1.jpg); height: 23px; width: 82px; border:0; } --> </style> <script> var tmr; function Over(){ document.getElementById("btnSub").style.backgroundImage="url('back2.jpg')"; clearTimeout(tmr); } function Out(){ document.getElementById("btnSub").style.background="url('back1.jpg')"; Overs(); } function Overs(){ document.getElementById("btnSub").style.backgroundImage="url('back1.jpg')"; tmr = setTimeout("Outs();",500); } function Outs(){ document.getElementById("btnSub").style.background="url('back2.jpg')"; tmr = setTimeout("Overs()",500); } </script> </head> <body> <p><a href="#" style="font-size:12px;" onmouseover="this.style.fontSize='36px';" onmouseout="this.style.fontSize='12px';">这个链接可以改变大小</a></p> <p> <input name="textfield" type="text" class="txtTest" id="txtTest" onmouseover="this.className='txtOutTest'" onmouseout="this.className='txtTest'" /> </p> <p> <input id="btnSub" type="button" class="btnSub" value="按钮" onmouseover="Over()" onmouseout="Out()" /> </p> </body> </html>
作者:dybai
出自:https://0xcafebabe.cnblogs.com
赞赏:3Ky9q5HVGpYseBPAUTvbJBvM3h3FQ3edqr(BTC)
本作品采用知识共享署名-相同方式共享 3.0 中国大陆许可协议进行许可。
欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接。
posted on 2011-06-06 15:20 0xCAFEBABE 阅读(1024) 评论(0) 编辑 收藏 举报