JS属性操作实例

来源：互联网发布：同花顺炒股软件好吗编辑：程序博客网时间：2024/05/21 10:08

[html] view plaincopy

<!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>

0 0