关于js中读取元素样式时浏览器的兼容问题

最新推荐文章于 2024-04-30 16:57:21 发布

雨后的黄昏

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量550

点赞数 1

文章标签： ie 8 javascript 前端开发函数

本文链接：https://blog.csdn.net/qq_36681922/article/details/75490584

版权

首先，我们的目的是通过js函数来读取html中的内联元素样式
这里有两个方法去读取样式 1.alert（元素.currentStyle.样式名）
2.alert（getComputedStyle(要获取样式的元素，一般为null)）
但是注意，第一个方法只能在IE浏览器中使用，其他浏览器不支持。而第二个方法却不支持IE8及以下的浏览器。而一般前端开发，浏览器的兼容性都是要到IE8为止，所以
我们就要解决这个兼容性的问题。
解决方法：
定义一个函数，用来获取指定元素的当前的样式
function getStyle(obj , name){

if(window.getComputedStyle){
//正常浏览器的方式，具有getComputedStyle()方法
return getComputedStyle(obj , null)[name];
}else{
//IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}

//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];

}
注意一点：该函数中的getComputedStyle方法不支持IE8，因此如果单单判断getComputedStyle这个变量是否存在的话，浏览器会报错。所以需要在前边加一个Window对象，
通过查找getComputedStyle这个对象的属性来避免浏览器报错，此时浏览器判断结果会是undefined而不是报错。

附代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				
				//点击按钮以后读取box1的样式
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//读取box1的宽度
					//alert(box1.style.width);
					
					/*
					 * 获取元素的当前显示的样式
					 * 	语法：元素.currentStyle.样式名
					 * 它可以用来读取当前元素正在显示的样式
					 * 	如果当前元素没有设置该样式，则获取它的默认值
					 * 
					 * currentStyle只有IE浏览器支持，其他的浏览器都不支持
					 */
					
					//alert(box1.currentStyle.width);
					//box1.currentStyle.width = "200px";
					//alert(box1.currentStyle.backgroundColor);
					
					/*
					 * 在其他浏览器中可以使用
					 * 		getComputedStyle()这个方法来获取元素当前的样式
					 * 		这个方法是window的方法，可以直接使用
					 * 需要两个参数
					 * 		第一个：要获取样式的元素
					 * 		第二个：可以传递一个伪元素，一般都传null
					 * 
					 * 该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 	可以通过对象.样式名来读取样式
					 * 	如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 	比如：没有设置width，它不会获取到auto，而是一个长度
					 * 
					 * 但是该方法不支持IE8及以下的浏览器
					 * 
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
					 * 	不能修改，如果要修改必须通过style属性
					 */
					//var obj = getComputedStyle(box1,null);
					
					/*alert(getComputedStyle(box1,null).width);*/
					//正常浏览器的方式
					//alert(getComputedStyle(box1,null).backgroundColor);
					
					//IE8的方式
					//alert(box1.currentStyle.backgroundColor);
					
					//alert(getStyle(box1,"width"));
					
					var w = getStyle(box1,"width");
					alert(w);
					
					
				};
				
			};
			
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数：
			 * 		obj 要获取样式的元素
			 * 		name 要获取的样式名
			 */
			
			function getStyle(obj , name){
				
				if(window.getComputedStyle){
					//正常浏览器的方式，具有getComputedStyle()方法
					return getComputedStyle(obj , null)[name];
				}else{
					//IE8的方式，没有getComputedStyle()方法
					return obj.currentStyle[name];
				}
				
				//return window.getComputedStyle?getComputedStyle(obj , null)[name]:obj.currentStyle[name];
				
			}
			
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button>
		<br /><br />
		<div id="box1" ></div>
	</body>
</html>

雨后的黄昏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于js中读取元素样式时浏览器的兼容问题

首先，我们的目的是通过js函数来读取html中的内联元素样式这里有两个方法去读取样式 1.alert（元素.currentStyle.样式名） 2.alert（getComputedStyle(要获取样式的元素，一般为null)）但是注意，第一个方法只能在IE浏览器中使用，其他浏览器不支持。而第二个方法却不支持IE8及
复制链接

扫一扫