14、关于获取html页面元素的非行间样式

最新推荐文章于 2021-06-09 20:09:58 发布

Bwz_Learning

最新推荐文章于 2021-06-09 20:09:58 发布

阅读量698

点赞数 1

分类专栏： JavaScript_Bak 文章标签： JavaScript JavaScript获取非行间样式非行间样子的获取 currentStyle getComputedStyle

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51470933

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

1、对于普通的方式无法获取到非行间样式的数值

1.1 html 代码

<body>
	<div id="div1" style="width: 100px;"></div>
</body>

1.2 CSS代码

<style type="text/css">
	#div1 {
		width: 100px;
		height: 100px;
		background: red;
	}
</style>

1.3 JavaScript代码

              <script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			window.onload = function() {
				$("div1").onclick = function() {
					alert(this.style.width)
				}
			}
		</script>

1.4 无法获取非行间样式的数值

1.5 修改html代码，则可以正常获取行间样式的数值

        <body>
		<div id="div1" style="width: 100px;"></div>
	</body>

2、获取非行间样式的方法

2.1 获取非行间样式的Javascript的方法

                        //那个元素
			//那个样式
			function getStyle(obj, attr) {
				//IE浏览器
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				}
				//火狐和谷歌浏览器
				else {
					return getComputedStyle(obj, false)[attr];
				}
			}

2.2 获取非行间样式的完成代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>获取非行间样式的属性数值</title>
		<style type="text/css">
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			//那个元素
			//那个样式
			function getStyle(obj, attr) {
				//IE浏览器
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				}
				//火狐和谷歌浏览器
				else {
					return getComputedStyle(obj, false)[attr];
				}
			}
			window.onload = function() {
				$("div1").onclick = function() {
					alert(getStyle(this, "width"));
				}
			}
		</script>
	</head>

	<body>
		<div id="div1"></div>
	</body>

</html>

2.3 关于复合样式的获取，以获取div的背景颜色为例子

2.3.1 错误的获取复合样式

              <script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			//那个元素
			//那个样式
			function getStyle(obj, attr) {
				//IE浏览器
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				}
				//火狐和谷歌浏览器
				else {
					return getComputedStyle(obj, false)[attr];
				}
			}
			window.onload = function() {
				$("div1").onclick = function() {
					alert(getStyle(this, "background"));
				}
			}
		</script>

2.3.2 IE和火狐的运行截图

2.3.3 正确的获取复合样式

              <script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			//那个元素
			//那个样式
			function getStyle(obj, attr) {
				//IE浏览器
				if (obj.currentStyle) {
					return obj.currentStyle[attr];
				}
				//火狐和谷歌浏览器
				else {
					return getComputedStyle(obj, false)[attr];
				}
			}
			window.onload = function() {
				$("div1").onclick = function() {
					alert(getStyle(this, "backgroundColor"));
				}
			}
		</script>

2.3.4 正确的获取截图