秒味--js热身练习题

最新推荐文章于 2022-07-04 08:21:36 发布

xiaoya13144111

最新推荐文章于 2022-07-04 08:21:36 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/xiaoya13144111/article/details/48107219

版权

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题</title>
<style type="text/css">
*{margin:0px;padding:0px;}
font{font-size:28px;font-family:"微软雅黑";font-wegiht:bold}
.btn{border:0px;color:#fff;background:#000;padding:10px 10px}
#box{width:100px;height:100px;border:2px solid #999;margin-left:30px;}
.windowDiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-100px;
background:#fff;border:10px solid rgba(0,0,0,0.2);z-index:2;padding:10px;display:none;
}
.blackBg{width:100%;height:100%;background:rgba(0,0,0,0.4);position:fixed;top:0px;left:0px;display:none;}
.clear{clear:both;line-height:0px;height:0px;font-size:0px;}
.colorBg,.width{height:30px;}
.colorBg span{width:140px;float:left;display:block;font-size:16px;font-weight:bold}
.colorBg p{float:left;width:150px;}
.colorBg p a{padding:5px 5px;color:#fff;text-decoration:none;margin-left:5px;}
.colorBg p a:nth-child(1){background:red}
.colorBg p a:nth-child(2){background:yellow}
.colorBg p a:nth-child(3){background:blue}
.width{margin-top:15px;}
.width span{width:140px;float:left;display:block;font-size:16px;font-weight:bold}
.width p{float:left;width:150px;}
.width p a{border:1px solid #ccc;background:#f2f2f2;padding:5px 5px;color:#333;text-decoration:none;margin-left:5px;}
.btnContent{text-align:center;padding-top:15px;}
.btnContent input{border:0px;padding:5px 15px;color:#fff;background:#00f}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDjBtn=document.getElementById("djBtn");
var oBox=document.getElementById("box");
var oWindowDiv=document.getElementById("windowDiv");
var oBlackDiv=document.getElementById("blackBg");
var colorBg=document.getElementById("colorBg");
var oWidth=document.getElementById("width");
var oHeight=document.getElementById("height");
var oSureBtn=document.getElementById("sure");
var oRest=document.getElementById("rest");
oDjBtn.οnclick=function(){
oWindowDiv.style.display="block";
oBlackDiv.style.display="block";
}
//设置背景色
var oA=document.getElementsByTagName("p")[0].getElementsByTagName("a");
for(var i=0;i<oA.length;i++){
oA[i].οnclick=function(){
oBox.style.background=getStyle(this,'background');
}
}

//设置宽度
var kd=oWidth.getElementsByTagName("p")[0].getElementsByTagName("a");
for(var i=0;i<kd.length;i++){
kd[i].οnclick=function(){
oBox.style.width=this.innerHTML+"px";
}
}

//设置高度
var height=oHeight.getElementsByTagName("p")[0].getElementsByTagName("a");
for(var i=0;i<height.length;i++){
height[i].οnclick=function(){
oBox.style.height=this.innerHTML+"px";
}
}

//确定关闭窗口
oSureBtn.οnclick=function(){
oWindowDiv.style.display="none";
oBlackDiv.style.display="none";
}
//重置
oRest.οnclick=function(){
oBox.style.width="100px";
oBox.style.height="100px";
oBox.style.background="#fff";
oWindowDiv.style.display="none";
oBlackDiv.style.display="none";
}

}
//获取不是内容样式的css属性值
function getStyle(obj, attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,false)[attr];
}
}

</script>

</head>
<body>

<font>请为下面的Div设置样式:</font><input class="btn" type="button" id="djBtn" value="点击设置" />
<div id="box"></div>

<div class="windowDiv" id="windowDiv">
<div class="colorBg" id="colorBg">
<span>请选择背景色</span>
<p>
<a href="javascript:;" >红</a><a href="javascript:;">黄</a><a href="javascript:;">蓝</a>
</p>
<div class="clear"></div>
</div>
<div class="width" id="width">
<span>请选择宽(px)</span>
<p>
<a href="#">200</a><a href="#">300</a><a href="#">400</a>
</p>
<div class="clear"></div>
</div>
<div class="width" id="height">
<span>请选择高(px)</span>
<p>
<a href="#">200</a><a href="#">300</a><a href="#">400</a>
</p>
<div class="clear"></div>
</div>
<div class="btnContent">
<input type="button" value="恢复" id="rest" /> <input type="button" value="确定" id="sure" />
</div>
</div>
<div id="blackBg" class="blackBg"></div>

</body>

</html>

大概样式

xiaoya13144111

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
秒味--js热身练习题

无标题*{margin:0px;padding:0px;}font{font-size:28px;font-family:"微软雅黑";font-wegiht:bold}.btn{border:0px;color:#fff;background:#000;padding:10px 10px}#box{width:100px;height:100px;border:2px sol
复制链接

扫一扫