js控制div样式

Original 2019-03-19 18:21:29 237
abstract:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>changeDIV</title><style>#box{width: 100px;height: 100px;background: red;}</style></

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>changeDIV</title>

<style>

#box{

width: 100px;

height: 100px;

background: red;

}

</style>

</head>

<body>

<!-- 用按钮控制div高度、宽度、颜色、重置、隐藏、显示 -->

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

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

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

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

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

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

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

<script type="text/javascript">

var box ;

window.onload = function(){

box = document.getElementById('box');

}

function aa(){

box.style.height ="400px";

}

function bb(){

box.style.width ="400px";

}

function cc(){

box.style.background ="pink";

}

function dd(){

box.style.width ="100px";

box.style.height ="100px";

box.style.background ="red";

}

function ee(){

box.style.display ="none";

}

function ff(){

box.style.display="block";

}

</script>

</body>

</html>


Correcting teacher:灭绝师太Correction time:2019-03-20 09:29:56
Teacher's summary:学习的速度有点快 , 要确保知识被吸收哦!

Release Notes

Popular Entries