js--函数初探

最新推荐文章于 2022-11-04 22:37:19 发布

格林黄

最新推荐文章于 2022-11-04 22:37:19 发布

阅读量156

点赞数

分类专栏： web前段javascript知识点汇总

本文链接：https://blog.csdn.net/apity123/article/details/72870700

版权

web前段javascript知识点汇总专栏收录该内容

17 篇文章 0 订阅

订阅专栏

对div变高、变宽、变色的运用

方法一

<!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>
<style>
	#div1
	{
	
		width:100px;
		height:100px;
		background-color:#33CC66;
	}
</style>

</head>

<body>
	<input type="button" οnclick="toHeight()"value="变高"/>
	<input type="button" οnclick="toWidth()" value="变宽"/>
	<input type="button" οnclick="toColor()" value="变色"/>
	<div id="div1">
	</div>
	<script>
	var oDiv=document.getElementById("div1");
	function toHeight()
	{
		oDiv.style.height="200px";
	}
	function toWidth()
	{
		oDiv.style.width="200px";
	}
	function toColor()
	{
		oDiv.style.background="blue";
	}
</script>
</body>
</html>

方法二--函数运用

<!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>
<style>
	#div1
	{
	
		width:100px;
		height:100px;
		background-color:#33CC66;
	}
</style>

</head>

<body>
	<input type="button" οnclick="toChange('height','200px')" value="变高"/>
	<input type="button" οnclick="toChange('width','200px')" value="变宽"/>
	<input type="button" οnclick="toChange('background','red')" value="变色"/>
	<div id="div1">
	</div>
	<script>
	var oDiv=document.getElementById("div1");
	function toChange(value,elem)
	{
		oDiv.style[value]=elem;
	}
	
</script>
</body>
</html>

格林黄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js--函数初探

对div变高、变宽、变色的运用方法一无标题文档 #div1 { width:100px; height:100px; background-color:#33CC66; } var oDiv=document.getElementById("div1"); function toHeight() { oDiv.st
复制链接

扫一扫

专栏目录