JavaScript：不定参数、获取非行间样式

1. 在函数中，可用arguments获取输入参数的个数以及值，示例代码：

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">

</style>
<script type="text/javascript">
	function sum(){
		var result = 0;
		for (var i = 0; i < arguments.length; i++) {
			result += arguments[i];
		}
		return result;
	}
	alert(sum(1,2,3,4));
</script>
</head>
<body>

</body>
</html>

arguments.length可以返回参数个数；arguments[i]可以像数组一样索引参数。

2. js获取非行间样式

2.1 js不能直接获取非行间样式，简单来说，不能通过oDiv.style.width的方式获取属性，如下代码执行没有结果：

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">
	#div1{
		width: 200px;
		height: 200px;
		background-color: red;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		alert(oDiv.style.backgroundColor);
	}
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

2.2 获取非行间样式，需要使用getComputedStyle()函数，用法：getComputedStyle(oDiv,false).width，第二个参数false可以随意填写，不影响。示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">
	#div1{
		width: 200px;
		height: 200px;
		background-color: red;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		alert(getComputedStyle(oDiv,false).width);
	}
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

2.3 getComputedStyle()存在兼容性问题，在IE7下不可使用，如果需要在IE7以下或者其他不兼容处使用，可以配合currentStyle，使用if-else做兼容判断。示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">
	#div1{
		width: 200px;
		height: 200px;
		background-color: red;
	}
</style>
<script type="text/javascript">
	window.onload = function(){
		var oDiv = document.getElementById('div1');
		if(oDiv.currentStyle)
		{
			alert(oDiv.currentStyle.width);
		}
		else
		{
			alert(getComputedStyle(oDiv,false).width);
		}
	}
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

3.封装一个可在js中使用的获取非行间样式的函数getStyle

<!DOCTYPE html>
<html>
<head>
	<title>innerHTML</title>
<style type="text/css">
	#div1{
		width: 200px;
		height: 200px;
		background-color: red;
	}
</style>
<script type="text/javascript">
	function getStyle(obj,addr){
		if(obj.currentStyle)
		{
			return obj.currentStyle[addr];
		}
		else
		{
			return getComputedStyle(obj,false)[addr];
		}
	}

	window.onload = function(){
		var oDiv = document.getElementById('div1');
		alert(getStyle(oDiv,"width"));

	}
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

 

posted @ 2020-02-07 13:54  昨夜昙花  阅读(9)  评论(0)    收藏  举报