JavaScript控制DIV样式作业

原创 2019-01-01 22:30:53 249
摘要:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>changeDIV</title> <style type="text/css"> #box{width: 100px; height: 100px; bac

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>changeDIV</title>

<style type="text/css">

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

</style>

</head>

<body>

<script type="text/javascript">

var box

window.onload=function () {

box=document.getElementsById('box')

}

function ch() {

box.style.height="400px;"//改变高度

}

function cw() {

box.style.width="400px;"//改变宽度

}

function cc() {

box.style.background="pink"//改变颜色

}

function rese() {

box.style.height"100px"

box.style.width="100px;"

box.style.background="red"

}

function yc() {

box.style.display="none;"

}

function xs() {

box.style.display="block;"

}

</script>

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

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

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

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

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

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

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

</body>

</html>


批改老师:天蓬老师批改时间:2019-01-02 07:53:12
老师总结:box.style.height="400px;", div是重要,最通用的元素 , 灵活使用极大的简化编程

发布手记

热门词条