JS控制DIV大小颜色显示与否

原创 2019-02-07 22:25:59 765
摘要:<!DOCTYPE html><html><head> <title>switch</title> <style type="text/css"> #box{width: 100px;height: 100px;background-color: red;margin: 20px 80px;} </s

<!DOCTYPE html>

<html>

<head>

<title>switch</title>

<style type="text/css">

#box{width: 100px;height: 100px;background-color: red;margin: 20px 80px;}

</style>

</head>

<body>

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



<script type="text/javascript">

var a=document.getElementById("box").style

function bg()

{

a.height ="200px"

}

function bk(){

a.width="200px"

}

function bs(){

a.background="blue"

}

function yc(){

a.display="none"

}

function xs(){

a.display="block"

}

function cz(){

a.display="block"

a.background="red"

a.width="100px"

a.height="100px"

}

</script>


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

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

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

<input type="button" value="重置" name="" onclick="cz()">

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

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


</body>

</html>


批改老师:韦小宝批改时间:2019-02-11 09:47:21
老师总结:写的很不错 一个简单的动画效果 没事的时候这种动画效果可以自己多实现几个来帮助我们记忆

发布手记

热门词条