- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>js属性操作实例</title>
- <style>
- *{ padding:0; margin:0;}
- ul{ list-style:none;}
- a{ text-decoration: none; color:#333;}
- .clearfix{zoom:1;}
- .clearfix:after{ clear:both; content:""; height:0; display:block; overflow:hidden;}
- .wrap{ padding:10px; font-size:12px; font-family:"Microsoft Yahei";}
- .show-tt h2{ float:left; margin-right:10px;}
- .set-btn{ background:#39F; color:#fff; padding:5px 10px; border:1px solid #38F;}
- .box1{ width:100px; height:100px; background:#ccc; border:1px solid #aaa;}
- .box2{ width:300px; height:200px; background:#fff; border:15px solid #999; position:absolute; z-index:1; left:40%; top:35%; display:none;}
- .box2-tt{ font-size:14px; font-weight:bold; font-family:"微软雅黑"; color:#000; list-style:none; line-height:40px; padding:10px 0 0 10px; width:115px; float:left; border:0px solid red;}
- .box2-nr{ width:171px; float:left; border:0px solid green;}
- .box2-nr a{ display:block; width:40px; text-align:center; margin-left:10px; margin-top:10px; background:#eee; border:1px solid #ddd; float:left; height:32px; line-height:32px;}
- .box2-nr .bg-red{ background:red; color:white; font-weight:bold;}
- .box2-nr .bg-yellow{ background:yellow; font-weight:bold;}
- .box2-nr .bg-blue{ background:blue; color:white; font-weight:bold;}
- .btn-group{ text-align:center; margin-top:10px;}
- .submit ,.reset{ background:#eee; border:1px solid #aaa; padding:5px 10px; margin:0 5px; cursor:pointer;}
- .mask{ width:100%; height:100%; background: black; position:absolute; top:0px; left:0; right:0; bottom:0; filter:alpha(opacity=20); opacity: 0.2; display:none; }
- </style>
- <script>
- window.onload = function(){
- var oSetbtn = document.getElementById('set-btn');
- var oBox2btn = document.getElementById('box2-btn');
- var aBox2btns = oBox2btn.getElementsByTagName('a');
- var oBtnGroup = document.getElementById('btn-group');
- var aInput = oBtnGroup.getElementsByTagName('input');
- var oBox1 = document.getElementById('box1');
- var oBox2 = document.getElementById('box2');
- var oMask = document.getElementById('mask');
- oSetbtn.onclick = function(){
- oBox2.style.display = 'block';
- oMask.style.display = 'block';
- };
- //变红
- aBox2btns[0].onclick = function(){
- oBox1.style.background = 'red';
- };
- //变黄
- aBox2btns[1].onclick = function(){
- oBox1.style.background = 'yellow';
- };
- //变蓝
- aBox2btns[2].onclick = function(){
- oBox1.style.background = 'blue';
- };
- //变宽到200
- aBox2btns[3].onclick = function(){
- oBox1.style.width = '200px';
- };
- //变宽到300
- aBox2btns[4].onclick = function(){
- oBox1.style.width = '300px';
- };
- //变宽到400
- aBox2btns[5].onclick = function(){
- oBox1.style.width = '400px';
- };
- //变高到200
- aBox2btns[6].onclick = function(){
- oBox1.style.height = '200px';
- };
- //变高到300
- aBox2btns[7].onclick = function(){
- oBox1.style.height = '300px';
- };
- //变高到400
- aBox2btns[8].onclick = function(){
- oBox1.style.height = '400px';
- };
- //确定
- aInput[0].onclick = function(){
- oBox2.style.display = 'none';
- oMask.style.display = 'none';
- };
- //重置
- aInput[1].onclick = function(){
- oBox1.style.background = '#ccc';
- oBox1.style.width = '100px';
- oBox1.style.height = '100px';
- };
- };
- </script>
- </head>
- <body>
- <div class="wrap">
- <div class="show-tt clearfix">
- <h2>请为下面的DIV设置样式</h2>
- <a id="set-btn" class="set-btn" href="javascript:;">点击设置</a>
- </div>
- <div id="box1" class="box1"></div>
- <div id="box2" class="box2">
- <div class="box2-cont clearfix">
- <div class="box2-tt">
- <ul>
- <li>请选择背景色:</li>
- <li>请选择宽度(PX):</li>
- <li>请选择高度(PX):</li>
- </ul>
- </div>
- <div id="box2-btn" class="box2-nr">
- <a class="bg-red" href="javascript:;">红</a>
- <a class="bg-yellow" href="javascript:;">黄</a>
- <a class="bg-blue" href="javascript:;">蓝</a>
- <a href="javascript:;">200</a>
- <a href="javascript:;">300</a>
- <a href="javascript:;">400</a>
- <a href="javascript:;">200</a>
- <a href="javascript:;">300</a>
- <a href="javascript:;">400</a>
- </div>
- </div>
- <div id="btn-group" class="btn-group">
- <input class="submit" type="submit" value="确定" />
- <input class="reset" type="reset" value="重置" />
- </div>
- </div>
- <div id="mask" class="mask"></div>
- </div>
- </body>
- </html>