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

Original 2019-04-15 15:59:20 251
abstract:<!DOCTYPE html><html><head> <title>改变div</title> <style type="text/css"> #box{width:100px; height: 100px; background:red; margin:20px 80px;} </style>

<!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>


Correcting teacher:查无此人Correction time:2019-04-16 09:53:36
Teacher's summary:完成的不错。js语句,每行结束后增加;号。继续加油。

Release Notes

Popular Entries