深入理解脚本化CSS系列第二篇——查询计算样式
前面的话
元素的渲染结果是多个CSS样式博弈后的最终结果,这也是CSS中的C(cascade)层叠的含义。访问第一篇中的style属性只能获取行间样式,这通常来说,并不是我们想要的结果。本文将详细介绍如何查询计算样式
getComputedStyle()
元素的计算样式(computedStyle)是一组在显示元素时实际使用的属性值,也是用一个 CSSStyleDeclaration对象来表示的,但计算样式是只读的,主要通过getComputedStyle()方法实现
getComputedStyle()方法接收两个参数:要取得计算样式的元素和一个伪元素字符串。如果不需要伪元素信息,第二个参数可以是null。getComputedStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式
[注意]IE8-浏览器不支持
getComputedStyle()方法原本是window对象下的方法,后来“DOM2级样式”增强了document.defaultView,也提供了getComputedStyle()方法。所以getComputedStyle()方法一共有下面3种写法
1、document.defaultView.getComputedStyle(div).width
2、window.getComputedStyle(div).width
3、getComputedStyle(div).width
其中第3种写法最简单
<div id="test" style="width: 100px;"></div>
<script>
//下面三行代码的结果都一样,IE8-浏览器报错,其他浏览器返回'100px'
console.log(document.defaultView.getComputedStyle(test).width);
console.log(window.getComputedStyle(test).width);
console.log(getComputedStyle(test).width);
</script>
伪元素
第二个参数代表伪元素字符串,包括":before"、":after"、":first-line"等,如果设置为null或省略不写,则返回自身元素的CSSStyleDeclaration对象
[注意]关于伪元素的详细内容移步至此
<style>
#test:before{
content:'';
width:20px;
display:inline-block;
}
</style>
<div id="test" style="width: 100px;"></div>
<script>
//IE8-浏览器报错,其他浏览器返回'20px'
console.log(getComputedStyle(test,':before').width);
</script>
注意事项
在使用getComputedStyle()方法的过程中,有如下注意事项:
【1】对于font、background、border等复合样式,各浏览器处理不一样。chrome会返回整个复合样式,而IE9+、firefox和safari则输出空字符串''
<div id="test" style="font-size:20px"></div>
<script>
//IE8-浏览器报错,chrome返回normal normal normal normal 20px / normal Simsun,其他浏览器返回''
console.log(getComputedStyle(test).font);
</script>
【2】不论以什么格式设置颜色,浏览器都以rgb()或rgba()的形式输出
<div id="test" style="color:red"></div>
<script>
//IE8-浏览器报错,其他浏览器返回rgb(255, 0, 0)
console.log(getComputedStyle(test).color);
</script>
【3】在计算样式中,类似百分比等相对单位会转换为绝对值
<div id="test" style="width:20%;"></div>
<script>
//IE8-浏览器报错,其他浏览器返回'304px'
console.log(getComputedStyle(test).width);
</script>
currentStyle
IE8-浏览器不支持getComputedStyle()方法,但在IE中每个具有style属性的元素有一个currentStyle属性,这个属性是CSSStyleDeclaration的实例,包含当前元素全部计算后的样式
<div id="test" style="font-size:20px;color:red;width:20%;"></div>
<script>
//IE8-浏览器返回undefined,IE9+浏览器返回''
console.log(test.currentStyle.font);
//IE浏览器返回red
console.log(test.currentStyle.color);
//IE浏览器返回20%
console.log(test.currentStyle.width);
</script>
由以上结果看出,currentStyle属性中的计算样式并不会输出集合样式,对颜色、百分比设置不会进行相应转换,而是原样输出
兼容
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
<div id="test" style="width:20px;"></div>
<script>
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
console.log(getCSS(test,'width'));//20px
</script>
IE
IE9+浏览器的getComputedStyle()方法和IE浏览器的currentStyle属性有一个特别的地方,就是可以识别自定义样式的值,虽然无法正常渲染,但是可以取出值
<div id="test" style="a:1"></div>
<script>
//其他浏览器输出undefined,而IE9+浏览器输出1
console.log(getComputedStyle(test).a);
//其他浏览器输出undefined,而IE浏览器输出1
console.log(test.currentStyle.a);
</script>
opacity
虽然IE8-浏览器无法对opacity属性进行正常渲染,但可以读出opacity属性的值。这对于opacity属性来说无疑是一个好消息
<div id="test" style="opacity:0.5"></div>
<script>
function getCSS(obj,style){
if(window.getComputedStyle){
return getComputedStyle(obj)[style];
}
return obj.currentStyle[style];
}
console.log(getCSS(test,'opacity'));//0.5
</script>
最后
一般地,我们通过getComputedStyle()方法或currentStyle属性获得元素的计算样式,但要获得元素精确的位置和尺寸信息,查询元素的计算样式并不是个好主意,因为类似padding、width等单一样式并不直接反映元素的位置和尺寸信息,这些信息是多个样式综合作用的结果。所以,最好使用前面介绍过的关于元素视图的offset、client、scroll和getBoundingClientRect()等来获取
欢迎交流
深入理解脚本化CSS系列第二篇——查询计算样式的更多相关文章
- 深入理解脚本化CSS系列第一篇——脚本化行内样式
× 目录 [1]用法 [2]属性 [3]方法 前面的话 脚本化CSS,通俗点说,就是使用javascript来操作CSS.引入CSS有3种方式:外部样式,内部样式和行间样式.本文将主要介绍脚本化行间样 ...
- 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法
× 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...
- 深入理解脚本化CSS系列第四篇——脚本化样式表
× 目录 [1]CSSStyleSheet [2]CSSRule 前面的话 关于脚本化CSS,查询样式时,查询的是计算样式:设置单个样式时,设置的是行间样式:设置多个样式时,设置的是CSS类名.脚本化 ...
- 深入理解脚本化CSS系列第三篇——脚本化CSS类
前面的话 在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类 style 我们在改变元素的少部分样式时,一般会直接 ...
- 深入理解脚本化CSS系列第五篇——动态样式
前面的话 很多时候,DOM操作比较简单明了,因此用javascript生成那些通常原本是HTML代码生成的内容并不麻烦.但由于浏览器充斥着隐藏的陷阱和不兼容问题,处理DOM中的某些部分时要复杂一些,比 ...
- 深入理解javascript函数进阶系列第二篇——函数柯里化
前面的话 函数柯里化currying的概念最早由俄国数学家Moses Schönfinkel发明,而后由著名的数理逻辑学家Haskell Curry将其丰富和发展,currying由此得名.本文将详细 ...
- 深入理解javascript选择器API系列第二篇——getElementsByClassName
× 目录 [1]使用 [2]classList [3]扩展 前面的话 既然有getElementById()和getElementsByTagName()方法,为什么没有getElementsByCl ...
- 深入理解DOM事件类型系列第二篇——键盘事件
× 目录 [1]类型 [2]顺序 [3]按键信息[4]应用 前面的话 鼠标和键盘是电脑端主要的输入设备,上篇介绍了鼠标事件,本文将详细介绍键盘事件 类型 键盘事件用来描述键盘行为,主要有keydown ...
- 深入理解DOM事件机制系列第二篇——事件处理程序
× 目录 [1]HTML [2]DOM0级 [3]DOM2级[4]IE[5]总结 前面的话 事件处理程序又叫事件侦听器,实际上就是事件的绑定函数.事件发生时会执行函数中相应代码.事件处理程序有HTML ...
随机推荐
- Java基础Map接口+Collections
1.Map中我们主要讲两个接口 HashMap 与 LinkedHashMap (1)其中LinkedHashMap是有序的 怎么存怎么取出来 我们讲一下Map的增删改查功能: /* * Ma ...
- java Web项目创建之一(普通java web项目的创建与发布)
1.创建新的web项目 file->new_>Dynamic Web Project(如图) 或file->new->Project->Web->Dynamic W ...
- android键盘
在应用的开发过程中有不少的情况下会用到自定义键盘,例如支付宝的支付密码的输入,以及类似的场景.android系统给开发者们提供了系统键盘,KeyboardView,其实并不复杂,只是有些开发者不知道罢 ...
- Spring cache简单使用guava cache
Spring cache简单使用 前言 spring有一套和各种缓存的集成方式.类似于sl4j,你可以选择log框架实现,也一样可以实现缓存实现,比如ehcache,guava cache. [TOC ...
- 修改session垃圾回收几率
<?php //修改session垃圾回收几率 ini_set('session.gc_probability','1'); ini_set('session.gc_divisor','2'); ...
- 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.core.NestedRuntimeException的类文件
在学习springAOP时,出现如下异常: 无法访问org.springframework.core.NestedRuntimeException 找不到org.springframework.cor ...
- iOS app内存分析套路
iOS app内存分析套路 Xcode下查看app内存使用情况有2中方法: Navigator导航栏中的Debug navigator中的Memory Instruments 一.Debug navi ...
- 《CPU的工作过程》
本文转载自inter官方网址:https://software.intel.com/zh-cn/articles/book-Processor-Architecture_CPU_work_proces ...
- 把int*传值给char*,打印出错误的数字
首先进入debug模式查看i的地址也就是ptr的值 以16进制位小端模式存储(一个整型四个字节,8位16进制数)(根据系统位数情况) 紧接着因为ptr是char*型指针变量,读取数据时按照一个字节一个 ...
- Jexus Web Server 完全傻瓜化图文配置教程(基于Ubuntu 12.04.3 64位)[内含Hyper-v 2012虚拟机镜像下载地址]
1. 前言 近日有感许多新朋友想尝试使用Jexus,不过绝大多数都困惑徘徊在Linux如何安装啊,如何编译Mono啊,如何配置Jexus啊...等等基础问题,于是昨日向宇内流云兄提议,不如搞几个配置好 ...