js和css的综合应用

abstract：<!doctype html><html> <head> <title>js改变css效果</title> &n

<!doctype html>

<html>
    <head>
        <title>js改变css效果</title>
        <style>
        *{margin:0px;padding:0px}
        #box{width:100px;height:100px;background:red;margin:40px 60px;}
        </style>
    </head>
    <body>
    
        <div id="box"><div>
        <input type="button" value="变高">
        <input type="button" value="变宽">
        <input type="button" value="变色">
        <input type="button"  value="重置">
        <input type="button"  value="消失">
        <input type="button" value="隐藏">
       <script>
       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;"  //chongzhi
		box.style.background="red；"
	}
	function ee(){
		box.style.display = "none" //消失
	}

	function ff(){
		box.style.display = "block" //显示
	}
       </script>
    </body>
</html>

Correcting teacher：灭绝师太Correction time：2019-03-18 09:24:35
Teacher's summary：完成的不错,除了上课练习,可以结合实际案例扩展!

js和css的综合应用

Popular Entries