日期:2014-05-18 浏览次数:21076 次
<html>
    <head>
        <style type="text/css">
            #2{
                background-color: red;
                width:200px;
                height:20px;
            }
            #3{
                background-color: black;
                width:200px;
                height:300px;
            }
        </style>
        <script type="text/javascript">
            function method1(){
                var div = document.getElementById("3");
                if(div.style.display == "none"){
                    div.style.display = "block";
                }else{
                    div.style.display = "none";
                }
            }
        </script>
    </head>
    <body>
        <div id="1">
            <div id="2">
                <input type="button" value="点击这里" onclick="method1()">
            </div>
            <div id="3">
            </div>
        </div>
    </body>
</html>
------解决方案--------------------
<html>
	<head>
		<title>Test</title>
		<script>
			var flag = 0;
			function test() {
				if(flag == 0) {
					flag = 1;
					document.getElementById("div_id").style.width = "100";    //你想把div设为多大就在这改为多大
					document.getElementById("div_id").style.height = "100";
				}else {
					flag = 0;
					document.getElementById("div_id").style.width = "1000";
					document.getElementById("div_id").style.height = "800";
				}
			}
		</script>
	<head>
	
	<body>
		<div id="div_id" style="width:1000; height:800; background-color:#CCEEF2">
			<input type="button" value="按钮" onclick="test()">
		</div>
	</body>
</html>
把上面找码直接考过去就能看到效果