getComputedStyle与currentStyle[通俗易懂]

getComputedStyle与currentStyle[通俗易懂]本文参考https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle1.简介  getComputedStyle是window下的一个全局函数,可以获取元素真正使用的样式。2.语法  varstyle=window.getComputedStyle(element[,ps

大家好,又见面了,我是你们的朋友全栈君。

本文参考https://developer.mozilla.org/en-US/docs/Web/API/Window.getComputedStyle

1.简介

   getComputedStyle是window下的一个全局函数,可以获取元素真正使用的样式。

2.语法   

var style = window.getComputedStyle(element[, pseudoElt]);

element是用于计算样式的dom节点,pseudoElt是一个用于匹配伪类的字符串,对于一般的dom元素来说,该参数应该被忽略或设置为null。需要注意的是在Gecko内核2.0(即Firefox4)之前该参数是必须的,对于其他主流浏览器来说该参数非必须,现在Firefox已经与其他浏览器一样将该参数设为optional,所以为了兼容性考虑,在没有匹配伪类的情况下,第二个参数最好传null。

还有一点需要说明的是,在Firefox3.6下,如果要获取框架样式(framed styles),必须要使用document.defaultView.getComputedStyle()而不能使用window.getComputedStyle()。那defaultView又是何物?其实defaultView返回的是document 对象所关联的 window 对象,如果没有,会返回 null。该属性为只读,IE 9 以下版本不支持 defaultView。

示例

<style>
 #elem-container{
   position: absolute;
   left:     100px;
   top:      200px;
   height:   100px;
 }
</style>

<div id="elem-container">dummy</div>
<div id="output"></div>  

<script>
  function getTheStyle(){
    var elem = document.getElementById("elem-container");
    var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
    document.getElementById("output").innerHTML = theCSSprop;
   }
  getTheStyle();
</script>

3.与element.style的区别

首先,element.style属性不仅可读,而且可写,而getComputedStyle获取的样式是只读的;其次,element.style获取的样式是很有限定的,只能获取那些我们显式的设置的内联css样式,对于浏览器缺省设置、外部样式表以及内部样式表(位于 <head> 标签内部)都输出空字符串,而getComputedStyle会输出最终应用于该element上的最终样式,而不管该样式是内联的还是外联的还是浏览器默认的,总之不会输出空字符串。就拿csdn博客这个页面举例来说,我们注意一下document.body的background样式,如下图

getComputedStyle与currentStyle[通俗易懂]

body的内联样式为空,但在内部样式表中设置了background样式,在控制台下用分别用style和getComputedStyle检测结果,如下图所示

getComputedStyle与currentStyle[通俗易懂]

4.浏览器兼容性

桌面浏览器

getComputedStyle与currentStyle[通俗易懂] 

IE9以下版本不支持getComputedStyle方法,恰如上文所说,IE9以下的document没有defaultView属性,所以只要是支持getComputedStyle的浏览器都可以调用document.defaultView.getComputedStyle()。所有版本的IE以及Opera的getComputedStyle方法都不支持伪类。

手机浏览器

getComputedStyle与currentStyle[通俗易懂]

手机浏览器对getComputedStyle方法基本都支持。

5.IE的currentStyle

如上文所说,IE8以及IE8以下的IE都不支持getComputedStyle方法,不过IE这坨奇葩提供了另一个属性element.currentStyle。到目前本文撰写为止,IE最新的浏览器IE11也保留该属性,也就是说IE9+的浏览器既可以使用getComputedStyle也可以使用element.currentStyle属性。element.currentStyle的示例如下:

document.body.currentStyle.getAttribute('backgroundColor')

getComputedStyle和element.currentStyle主要存在以下区别:

a.前者在很多浏览器上(except IE)都支持伪类,currentStyle完全不支持伪类;

b.前者使用getPropertyValue获取样式,后者使用getAttribute获取样式;

c.getPropertyValue中传入的变量不支持驼峰标示,多单词的css属性名只能以“-”连接,比如getPropertyValue(“background-color”)合法,而getPropertyValue(“backgroundColor”)非法;IE有时候传入“-”连接符变量可以获取正确结果,有时候传入驼峰标识变量能获取正确结果,IE11下测试如下图

 getComputedStyle与currentStyle[通俗易懂]

d.在获取width、height等表示空间大小的样式时,getComputedStyle一般都返回具体的像素大小,比如“200px”,是一个绝对的大小;而currentStyle返回的有可能不是绝对值而是之前设置的相对值,比如“50%”等,以下为在IE11下对百度首页的测试结果

getComputedStyle与currentStyle[通俗易懂]

其实在大部分情况下,width、height等的绝对值对我们的用处更大,而且currentStyle也只是微软自家的属性,不是标准,所以在IE9+的浏览器下推荐使用getComputedStyle

6.兼容所有浏览器计算样式的代码

//将名称转换成驼峰标志的形式
	function toCamelCase(name){
		var result = "";
		var words = name.split("-");
		for(var i=0;i<words.length;i++){
			var word = words[i].toLowerCase();
			if(i !== 0){
				word = word[0].toUpperCase() + word.slice(1,word.length);
			}
			result += word;
		}
		return result;
	}

	//将变量名称转换成"-"连接符形式
	function toHyphen(name){
		var result = "";
		for(var i=0;i<name.length;i++){
			var c = name[i];
			if(i !== 0){
				if(c.match(/[A-Z]/g)){
					c = "-"+c.toLowerCase();
				}
			}
			result += c;
		}
		return result;
	}

	//通过currentStyle得到样式
	function _getStyleforIE(dom,styleName){
		var result = null;
		if(dom.currentStyle){
			styleName = toHyphen(styleName);
			result = dom.currentStyle.getAttribute(styleName);
			if(!result){
				styleName = toCamelCase(styleName);
				result = dom.currentStyle.getAttribute(styleName);
			}
		}
		return result;
	}

	//兼容所有浏览器的计算样式的方法
	function getElementComputedStyle(dom,styleName){
		if(!(dom instanceof HTMLElement)){
			return null;
		}
		if(typeof styleName !== "string"){
			return null;
		}
		else{
			styleName = styleName.replace(/\s/,"");
			if(styleName === ""){
				return null;
			}
		}

		var style = null;

		if(document.defaultView){					
			var domStyles = document.defaultView.getComputedStyle(dom,null);
			styleName = toHyphen(styleName);
			style = domStyles.getPropertyValue(styleName);
			if(!style){
				if(dom.currentStyle){
					style = _getStyleforIE(dom,styleName);
				}
			}
		}
		else if(dom.currentStyle){
			style = _getStyleforIE(dom,styleName);
		}

		return style;
	}

在使用时调用getElementComputedStyle方法即可。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/158980.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • phantomjs 简介「建议收藏」

    phantomjs 简介「建议收藏」在爬虫、自然语言处理群320349384中的交流中,偶然接触到phantomjs、casper等相对于httpclient较新的框架及采集解决方案,微查之后发现方案可行,故尽清明三日之力,将其二次开发应用于百度元搜索信息采集项目中,达到预期效果,下一步将重点应用到腾讯微博采集和抢票抢手机项目中。下面,将分步骤介绍一下。  一、phantomjs介绍   (1)一个基于web

  • oracle并非所有变量都已绑定

    oracle并非所有变量都已绑定给Model中变量赋初始值就OK了。

  • Android退出APP时如何同时结束APP进程

    Android退出APP时如何同时结束APP进程1.在退出APP的代码逻辑里加入以下代码:ActivityManageram=(ActivityManager)getSystemService(ACTIVITY_SERVICE);am.killBackgroundProcesses(“包名”);//API至少为8才能使用2.添加权限

  • JVM进阶(十一):JAVA G1收集器

    JVM进阶(十一):JAVA G1收集器JVM进阶(十一)——JAVAG1收集器  在前两篇博文中讲解了新生代和年老代的收集器,在本篇博文中介绍一个收集范围涵盖整个堆的收集器——G1收集器。先讲讲G1收集器的特点,他也是个多线程的收集器,能够充分利用多个CPU进行工作,收集方式也与CMS收集器类似,因此不会有太久的停顿。  虽然回收的范围是整个堆,但还是有分代回收的回收方式。在年轻代依然采用复制算法;年老代也同样采用“标记-清除

  • mac clion激活码【2021.8最新】

    (mac clion激活码)JetBrains旗下有多款编译器工具(如:IntelliJ、WebStorm、PyCharm等)在各编程领域几乎都占据了垄断地位。建立在开源IntelliJ平台之上,过去15年以来,JetBrains一直在不断发展和完善这个平台。这个平台可以针对您的开发工作流进行微调并且能够提供…

  • linux//unix实用基本命令小全

    linux//unix实用基本命令小全

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号