style、currentStyle、getComputedStyle的应用

最新推荐文章于 2019-11-22 13:49:48 发布

因火成烟

最新推荐文章于 2019-11-22 13:49:48 发布

阅读量571

点赞数

分类专栏： js 文章标签： js css函数浏览器兼容

本文链接：https://blog.csdn.net/thefoma/article/details/46418071

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>style,currentStyle,getComputedStyle</title>
	<style type="text/css">
		#div1 {
			background-color: #f60;
			width: 400px;
			height: 200px;
			margin: 0 auto;
		}
	</style>
	<link rel="stylesheet" href="t.css">
</head>

<body>
	<div id="div1" style="padding:5px;color:#fff"></div>
	<script type="text/javascript">
		function css(obj, attr) {
			if (obj.currentStyle) {
				//只在IE下有效,无论是元素的内联样式、外部样式，内部样式下都有效
				return alert("IE " + obj.currentStyle[attr]);
			} else {
				//2种情况：1：访问元素的内联样式，FF下没效果，chrome下有效果。
				//        2：访问内部样式和外部样式时，FF,chrome下有效果。
				return alert("FF,Chrome " + getComputedStyle(obj, false)[attr]);
				//2种情况:1:在访问元素的内联样式时，在IE,FF,chrome下均有效（返回颜色时返回的是rgb格式）
				//		 2：在访问内部样式和外部样式时，会弹出窗口但不会有结果，在IE,FF,chrome下一样的情况
				//				return alert("元素的内链样式："+obj.style[attr]);
			}

		}
		css(div1, "width");
	</script>
</body>

</html>

t.css

#div1{
	cursor: pointer;
}

这三种方法在浏览器兼容性方面相互互补，在元素访问的权限上主要体现在obj.style上。

因火成烟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
style、currentStyle、getComputedStyle的应用

style,currentStyle,getComputedStyle #div1 { background-color: #f60; width: 400px; height: 200px; margin: 0 auto; } function css(obj, attr) { if (obj.currentStyle) {
复制链接

扫一扫