js控制DIV

原创2019-06-26 21:56:13176
摘要:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>js控制DIV</title><style type="text/

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js控制DIV</title>

<style type="text/css">

#box{

height:100px;

width:100px;

background:red;

margin-top:20px;

margin-left:100px;

}

#pass{

margin-left:20px;

}

[value]{

margin-top:10px;

margin-left:5px;

}

</style>

</head>

<body>

<script type="text/javascript">

var mydiv;

window.onload=function(){

mydiv=document.getElementById('box');}

function bg(){

mydiv.style.height="200px";}

function bk(){

mydiv.style.width="200px";}

function bs(){

mydiv.style.background="pink";}

function by(){

mydiv.style.borderRadius="100px";}

function yc(){

mydiv.style.display="none";}

function xs(){

mydiv.style.display="block";}

</script>

<div id="box"></div>

<div id="pass">

<input type="button" value="变高"  onclick="bg()"/>

<input type="button" value="变宽"  onclick="bk()"/>

<input type="button" value="变色"  onclick="bs()"/>

<input type="button" value="变圆"  onclick="by()"/>

<input type="button" value="隐藏"  onclick="yc()"/>

<input type="button" value="显示"  onclick="xs()"/>

</div>

</body>

</html>


批改老师:天蓬老师批改时间:2019-06-27 13:00:14
老师总结:期待你来自己与一个, 以后不用再照搬教学代码啦...........

发布手记

热门词条