JavaScript控制DIV样式

Original 2018-12-06 15:07:18 295
abstract:<!DOCTYPE html><html><head> <title> JavaScript控制DIV样式</title> <style type="text/css" > #box{width:300px;height:300px;background: red;margin:30px 30px; }

<!DOCTYPE html>

<html>

<head>

<title> JavaScript控制DIV样式</title>

<style type="text/css" >

#box{width:300px;height:300px;background: red;margin:30px 30px; }

</style>

</head>

<body >

<script type="text/javascript">

var box

window.onload=function () {

box=document.getElementById('box')

}

function aa(){

box.style.height="600px"

}

function bb(){

box.style.width="600px"

}

function cc(){

box.style.background="pink"

}

function dd(){

box.style.width="300px"

box.style.height="300px"

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:2018-12-06 15:18:41
Teacher's summary:dom中的style属性,实际上是一个对象,所以要用对象的方式访问

Release Notes

Popular Entries