js效果原理的應用
阿新 • • 發佈：2018-12-10
效果原理 ·準備幾套CSS樣式表 ·除錯好相容性 ·在點選按鈕時，改變herf值 onclick的使用 ·當點選時 ·時件可以隨意改變
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>無標題文件</title> <link id="link1" href="css1.css" rel="stylesheet" type="text/css" /> </head> <body> <dl id="message"> <form> <dt> <strong>可以換膚的提交框：</strong> <input id="btn1" type="button" value="面板1" onclick="document.getElementById('link1').href='css1.css';" /> <input id="btn2" type="button" value="面板2" onclick="document.getElementById('link1').href='css2.css';" /> </dt> <dd>輸入姓名：<input class="text" type="text" /></dd> <dd>輸入密碼：<input class="text" type="password" /></dd> <dd>請您留言：<textarea></textarea></dd> <dd class="center"><input class="btn" type="submit" value="提交" /></dd> </form> </dl> </body> </html>
css1.css
body { margin-top: 40px; background: url(bg1.jpg) no-repeat center center; } dl { width: 400px; border: 2px solid #ccc; background: #FFFFCC; padding: 20px; margin: 0 auto; filter: alpha(opacity: 70); opacity: 0.7; } dt { font-size: 18px; color: #009933; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; } dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; } .text { width: 300px; height: 30px; line-height: 30px; } textarea { width: 300px; height: 120px; overflow: auto; } .btn { width: 120px; height: 40px; } .center { text-align: center; }
css2.css
body { background: url(bg.gif); margin-top: 40px; } dl { width: 600px; border: 4px solid #fff; background: #669999; padding: 20px; margin: 0 auto; filter: alpha(opacity: 90); opacity: 0.9; } dt { font-size: 18px; color: #fff; border-bottom: 1px solid #ccc; padding-left: 10px; padding-bottom: 10px; margin-bottom: 20px; } dd { margin-left: 0; padding-bottom: 10px; font-size: 14px; padding-left: 10px; color: #fff; } .text { width: 500px; height: 30px; line-height: 30px; font-weight: bold; font-size: 14px; font-family: arial; } textarea { width: 500px; height: 120px; overflow: auto; font-weight: bold; font-size: 14px; font-family: arial; } .btn { width: 120px; height: 40px; } .center { text-align: center; }