＜Dom-getComoutedStyle函数检测＞

最新推荐文章于 2022-01-08 14:45:11 发布

好先生·

最新推荐文章于 2022-01-08 14:45:11 发布

阅读量152

点赞数

分类专栏： Dom操作文章标签： Dom dom操作

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240511

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		#app {
			font-size: 40px;
			width: 200px;
			height: 200px;
			background-color: skyblue;
		}
	</style>
</head>
<body>
	<!-- 不管是低版本还是高版本的浏览器都可以正常输出计算后的样式
		需要进行能力检测,就是
		判断认不认识window.getComoutedStyle()这个方法 -->
	<div id="app" style="font-size: 50px; background-color: pink">
		heslay
	</div>
	<script type="text/javascript">
		/*
		封装一个getstyle方法 可以在不同浏览器下获取样式
		@obj	元素对象
		@key	属性名称
		@return	获取的样式
		*/
		function getStyle(obj,key) {
			//能力检测,判断浏览器是否支持某些新的方法
			//支持就使用,不支持就改变支持的方法
			if (window.getComputedStyle) {
				//加入window防止浏览器报错
				//返回处理的结果
			//return getComputedstyle(obj)[key];
				//若key是驼峰式 转换成横杠法
				key=key.replace(/([A-Z])/g,function(match, $1) {
					return '-' + $1.toLowerCase();
				});
				return getComputedStyle(obj).getPropertyValue(key);
			}
			else {
				var style=obj.currentStyle;
				if (style) {
					//将横杠法转换成驼峰式
					key=key.replace(/-([a-z])/g,function(match,$1) {
						return ($1 || '').toUpperCase();
					});
				}
				else {
					alert("浏览器不支持计算样式");
				}
			}
		}
		var app1=document.getElementById('app');
		alert(getStyle(app1,"backgroundColor"));
	</script>
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
＜Dom-getComoutedStyle函数检测＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #app { font-size: 40px; width:
复制链接

扫一扫