javascript不定参数&&兼容性样式设置与获取

最新推荐文章于 2022-07-28 12:49:44 发布

zhanyan_x

最新推荐文章于 2022-07-28 12:49:44 发布

阅读量707

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhanyan_x/article/details/40651881

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>不定参数/可变参数</title>
		<style type="text/css">
			#div1{
				width: 100px;
				height: 100px;
				background-color:#FF0000;
			}
		</style>
	</head>
	<script type="text/javascript">
		function add(){//可以不定参数
			//alert(arguments.length);//输出参数的个数
			var sum=0;
			var i=0;
			for(i=0;i<arguments.length;i++){//加法计算
				sum+=arguments[i];
			}
			return sum;
		}
		function show(){
			//alert(arguments.length);//输出参数的个数
			//设置层的颜色
				if(arguments[0].currentStyle){//IE
					alert(arguments[0].currentStyle["background-color"]);
				}else{//Firefox,chrome
					alert(window.getComputedStyle(arguments[0],false).getPropertyValue("background-color"));
					//window.getComputedStyle(arguments[0],false)["background-color"];//firefox不支持
				}
			
		}

		//获取属性,或者设置属性,
		function objectStyle(obj,attr,value){
			if (arguments.length==2)//当参数为obj,attr为获取属性值
			{
				if (attr.currentStyle) {//IE
					return obj.currentStyle[attr];
				}else{//others
					return window.getComputedStyle(obj,false).getPropertyValue(attr);
				}
			}else if(arguments.length==3){//当参数为obj,attr,value为设置属性值
				obj.style[attr]=value;
			}
		}

	

		window.οnlοad=function(){
			//alert(add(1,2,3,4,5,6,7,8,9,10));//调用不定参数的加法运算
			var oBtnGetColor=document.getElementById("btnGetColor");//获取层颜色
			var oBtnSetColor=document.getElementById("btnSetColor");//设置层的颜色
			var oBtnSetWidth=document.getElementById("btnSetWidth");//修改层的宽度
			var oDiv=document.getElementById("div1");
			oBtnGetColor.οnclick=function(){//获取层的颜色
				show(oDiv);
			};
			oBtnSetColor.οnclick=function(){
				objectStyle(oDiv,"background-color","green");//修改层的颜色
				
			};
			oBtnSetWidth.οnclick=function(){//修改层的宽度
				objectStyle(oDiv,"width","200px");
			};

		};
		
	</script>
	<body>
			<input id="btnGetColor" type="button" value="获取层的颜色" />
			<input id="btnSetColor" type="button" value="修改层的颜色" />
			<input id="btnSetWidth" type="button" value="修改层的宽度" />
			<div id="div1">
			</div>
	</body>
</html>

zhanyan_x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript不定参数&&兼容性样式设置与获取

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 不定参数/可变参数 #div1{ width: 100px; height: 100px; background-color:#FF0000;
复制链接

扫一扫

专栏目录