返回用JS改变DV......登陆

用JS改变DVI的宽高,颜色,显示和隐藏

OneZone2019-04-15 15:59:20251

<!DOCTYPE html>

<html>

<head>

<title>改变div</title>

<style type="text/css">

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


</style>

</head>

<body>


<div id="box">

</div>

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

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

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

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

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

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




<script type="text/javascript">

var box = document.getElementById('box');

window.onload= function(){


}


function changeHeight(){

box.style.height="400px"

}


function changeK(){

box.style.width="400px"

}


function changeColor(){

box.style.background="pink";

}


function reset(){

box.style.width="100px";

box.style.height="100px;"

box.style.background="red"

}


function hide(){

box.style.display="none"

}


function show(){

box.style.display="block"

}



</script>


</body>

</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送