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)
blank

相关推荐

  • golang 激活码2021-激活码分享「建议收藏」

    (golang 激活码2021)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~4D…

  • Qt实现简单的单例模式

    Qt实现简单的单例模式

  • linux ptrace函数

    linux ptrace函数【ptrace系统调用】功能描述:提供父进程观察和控制另一个进程执行的机制,同时提供查询和修改另一进程的核心影像与寄存器的能力。主要用于执行断点调试和系统调用跟踪。父进程可通过调用fork,接着指定所产生的子进程的PTRACE_TRACEME行为,最后使用exec等操作来初始化一个进程跟踪。可替代的做法是,父进程通过PTRACE_ATTACH请求跟踪一个现存进程的执行。当子进程

    2022年10月31日
  • webhosting什么意思_总带宽

    webhosting什么意思_总带宽Whenchoosingahost,theamountofbandwidthyoupurchasecanbecrucialtothesuccessofyoursite.Generallyspeaking,themorebandwidthyouhave,themoretrafficyoursitewillbeabletohandl…

  • 单片机c语言程序设计试卷_stm32常见面试题

    单片机c语言程序设计试卷_stm32常见面试题c语言面试题集(单片机).c语言面试题集(单片机)1.预处理器(Preprocessor)1.用预处理指令#define声明一个常数,用以表明1年中有多少秒(忽略闰年问题)#defineSECONDS_PER_YEAR(60*60*24*365)UL:1).#define语法的基本知识(例如:不能以分号结束,括号的使用,等等)2).懂得预处理器将为你计算常数表达式的值,因…

  • python正则表达式匹配 模式匹配[通俗易懂]

    python正则表达式匹配 模式匹配[通俗易懂]Python正则式的基本用法初学Python,对Python的文字处理能力有很深的印象,除了str对象自带的一些方法外,就是正则表达式这个强大的模块了。但是对于初学者来说,要用好这个功能还是有点难度

发表回复

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

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