点击事件改变DIV元素

Original 2019-05-27 14:30:06 385
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>点击事件改变DIV元素</title> <style type="text/css"> #box{width: 100px;height: 100px;bac

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>点击事件改变DIV元素</title>

<style type="text/css">

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

</style>

</head>

<body>

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

<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.height="100px"

box.style.width="100px"

box.style.background="red"

}

function ee() {

box.style.display="none"


}

    function ff() {

box.style.display="block"


}


</script>

<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()">


</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-05-28 15:53:09
Teacher's summary:要注意, style是一个对象, 而不是一个变量, 这才是关键

Release Notes

Popular Entries