大家好,又见面了,我是你们的朋友全栈君。
本文参考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样式,如下图
body的内联样式为空,但在内部样式表中设置了background样式,在控制台下用分别用style和getComputedStyle检测结果,如下图所示
4.浏览器兼容性
桌面浏览器
IE9以下版本不支持getComputedStyle方法,恰如上文所说,IE9以下的document没有defaultView属性,所以只要是支持getComputedStyle的浏览器都可以调用document.defaultView.getComputedStyle()。所有版本的IE以及Opera的getComputedStyle方法都不支持伪类。
手机浏览器
手机浏览器对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下测试如下图
d.在获取width、height等表示空间大小的样式时,getComputedStyle一般都返回具体的像素大小,比如“200px”,是一个绝对的大小;而currentStyle返回的有可能不是绝对值而是之前设置的相对值,比如“50%”等,以下为在IE11下对百度首页的测试结果
其实在大部分情况下,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账号...