返回javascr......登陆

javascript控制DIV样式

张翔2019-05-09 16:43:40223
<!DOCTYPE html>
<html>
<head>
	<title>javascript控制DIV样式</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.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';  // 重置
			box.style.background = 'red';
		}
		function ee(){						// 隐藏
			box.style.display = 'none';
		}
		function ff(){						// 显示
			box.style.display = 'block';
		}

	</script>
	<input type="button" onclick="aa()" value="变高">
	<input type="button" onclick="bb()" value="变宽">
	<input type="button" onclick="cc()" value="变色">
	<input type="button" onclick="dd()" value="重置">
	<input type="button" onclick="ee()" value="隐藏">
	<input type="button" onclick="ff()" value="显示">
	<div id="box"></div>

</body>
</html>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送