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

客官°小女子只卖身不卖艺 2022-07-24 11:14 162阅读 0赞

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

1.1 html 代码

1.2 CSS代码

1.3 JavaScript代码

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

![20160521163805735][]

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

![20160521162319013][]

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  错误的获取复合样式

2.3.2  IE和火狐的运行截图

![20160521163818736][]

2.3.3 正确的获取复合样式

2.3.4 正确的获取截图

![20160521164128702][]

[20160521163805735]: /images/20220722/551449180e8245b198e4349f682c8127.png
[20160521162319013]: /images/20220722/c6527d4f4a8e480291725017f997af0e.png
[20160521163818736]: /images/20220722/b687284cfd93497096fe27f990760e73.png
[20160521164128702]: /images/20220722/233c3a1d223342a0b5af92d1b723d0d1.png