javascript控制div样式

Original 2019-04-17 12:52:49 286
abstract:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>


<script type="text/javascript">

var box

window.onload = function(){

box = document.getElementById("box")

}



function aa() {

box.style.height="400px";

}


function bb() {

box.style.width="500px";

}


function cc() {

box.style.background="red";

}


function dd() {

box.style.height="300px";

box.style.width="300px";

box.style.background="#ccc";

}



function ee() {

box.style.display="none" }



function ff() {

box.style.display="block" }



</script>



<style type="text/css">

#box{ width:300px; height:300px; background-color:#ccc; margin:20px;}


</style>


</head>


<body>

<p>js学习</p>



<div id = "box">    

</div>


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

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

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

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

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

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


</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-04-17 13:46:38
Teacher's summary:function ff() { box.style.display="block" } 尽管js允许省略后面的分号, 但是如何你省略就全部都不要写, 不要一会写, 一会不写, 要保持 统一的风格

Release Notes

Popular Entries