解决JS中的浏览器兼容问题

最新推荐文章于 2024-04-21 22:42:05 发布

Annlilawer

最新推荐文章于 2024-04-21 22:42:05 发布

阅读量862

点赞数

分类专栏：编程-总结知识点文章标签： css 标签

本文链接：https://blog.csdn.net/Anlilower/article/details/52588942

版权

编程-总结知识点专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.当我们把css的style样式写在行内标签时，我们调用时直接用 Obj.style.属性

2.但当我们把css的style样式写在了<head></head>里面时，我们需要用 Obj.currentStyle.属性 (IE浏览器专用)

var oDiv = document.getElementById('love');
alert(oDiv.currentStyle['width']);</span>

3.当我们想要用高级浏览器如CHROM时需要用 getComputedStyle(对象,null)['属性']

var oDiv = document.getElementById('love');
				
alert(getComputedStyle(oDiv,null)['width']);</span>

4.如何使浏览器兼容呢，我们只需要写一个方法就解决了这个问题啦

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		#abc{width: 320px;height: 300px;clear:both;margin-left:10px;display:none;}
		
	</style>
</head>
<body>
	
	<div id="abc">军事</div>
	<script>
		window.onload = function()
		{
			var obj = document.getElementById('abc');
			alert(getStyle(obj,'width'));
		}
		
		/*兼容的函数*/
		function getStyle(obj,sName) {
			if (typeof(obj.currentStyle) == 'undefined') {
				return getComputedStyle(obj,null)[sName];
			} else {
				return obj.currentStyle[sName];
			}
		}
		
		
	</script>
</body>
</html>