深入理解脚本化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()等来获取

  欢迎交流


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

创建自己的Java批注

如果您一直在用Java编程并且使用诸如Spring和Hibernate之类的任何流行框架&#xff0c;那么您应该对使用注释非常熟悉。 当使用现有框架时&#xff0c;其注释通常就足够了。 但是&#xff0c;您是否发现需要创建自己的注释&#xff1f; 不久之前&#xff0c;我找到了一个理由来…

浅谈MAXIMO项目实施(转)

浅谈MAXIMO项目实施工作以来&#xff0c;参与了XX公司的MAXIMO项目实施&#xff0c;妄谈一些工作中的感受和对MAXIMO的理解&#xff0c;欢迎砖头。[b]对MAXIMO的理解[/b]MAXIMO是老外的软件&#xff0c;是J2EE上架起的很成熟的平台级系统&#xff0c;其中融入了老外的管理方式和…

完整机器学习项目的流程

1 抽象成数学问题 明确问题是进行机器学习的第一步。机器学习的训练过程通常都是一件非常耗时的事情&#xff0c;胡乱尝试时间成本是非常高的。 这里的抽象成数学问题&#xff0c;指的明确我们可以获得什么样的数据&#xff0c;抽象出的问题&#xff0c;是一个分类还是回归或者…

使用Stream API的类Java产量

几种编程语言&#xff08;例如Ruby或Python等&#xff09;提供yield命令。 在内存消耗方面&#xff0c;Yield提供了一种有效的方式&#xff0c;可以通过按需生成值来创建一系列值。 有关Python产量的更多信息。 让我们考虑一个需要大量安全随机整数的类或方法。 经典方法是创建…

深入理解DOM节点类型第六篇——特性节点Attribute

前面的话 元素的特性在DOM中以Attr类型表示&#xff0c;从技术角度讲&#xff0c;特性是存在于元素的attributes属性中的节点。尽管特性是节点&#xff0c;但却不是DOM节点树的一部分。本文将详细介绍该部分内容 特征 特性节点的三个node属性————nodeType、nodeName、nodeV…

Vista,Windows7中给IIS7添加PHP支持

截止到发文时&#xff08;2009年9月25日&#xff09;&#xff0c;PHP是最新版本为5.3.0&#xff0c;但是5.3.0在IIS中的运行方式是FastCGI&#xff0c;要在Vista的IIS7上实现这一点我始终没弄成。最后我还是用的老方法&#xff0c;ISAPI&#xff0c;选用了一个5.3以前的版本&am…

python画手绘图

第一步&#xff1a;插入代码 #e17.1HandDrawPic.py from PIL import Image import numpy as np vec_el np.pi/2.2 # 光源的俯视角度&#xff0c;弧度值 vec_az np.pi/4. # 光源的方位角度&#xff0c;弧度值 depth 10. # (0-100) im Image.open(C:\\Users\\Thinkpad\\Deskt…

cf1208G Polygons 欧拉函数

链接 cf 给你两个正整数\(n\)和\(k\)&#xff0c;询问在一个圆上你最少需要几个点构才能造出\(k\)个边数小于等于\(n\)的正多边形 思路 深受迫害&#xff0c;所以写的详细一点&#xff0c;不会请留言。 性质1 考虑加进一个\(x\)边形。那么他的因子\(d\)一定在他之前加进来了. 因…

Java 8:功能性VS传统

业务逻辑是相同的&#xff1a; 给定一个由访问次数/时间组成的String表达式&#xff0c;例如&#xff1a;“ 1 / 24h&#xff0c;1..3 / 3h&#xff0c;5 / *” 然后&#xff0c;结果应为以下字符串列表&#xff1a; “ 1 / 24h”&#xff0c; “ 1 / 3h”&#xff0c;“ 2…

深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器

前面的话 过滤选择器的内容非常多&#xff0c;本文介绍过滤选择器的最后一部分——状态选择器 焦点状态 :focus :focus选择器选择当前获得焦点的元素 <div><button>btn1</button><button>btn2</button><button>btn3</button></d…

aop 幂等验证(二)

1 创建IIdempotent Target({ElementType.PARAMETER, ElementType.METHOD}) Retention(RetentionPolicy.RUNTIME) Documented public interface IIdempotent { } 2 创建aop Component Aspect public class IdempotentAction {public final static String ERROR_REPEATSUBMIT &q…

pursuit of happiness

看的过程中&#xff0c;一直在看时间&#xff0c;只剩30分钟了&#xff0c;20分&#xff0c;15分了&#xff0c;主人公怎么还没发达。 因为那种痛苦&#xff0c;绝望&#xff0c;沮丧&#xff0c;真的可以隔着屏幕传递过来。 你会带着儿子住厕所么&#xff1f; 你会拼了老命赶时…

解读阿里巴巴集团的“大中台、小前台”组织战略

解读阿里巴巴集团的“大中台、小前台”组织战略 https://www.iyiou.com/p/92012.html 亿欧导读 ] 阿里的“中台战略” 不是一个简单的组织变革&#xff0c;还有业务变革、机制变革、技术架构变革的一次全面转型。 【编者按】阿里巴巴“大中台小前台”的中台战略的官方提法源自2…

编译时检查JPA查询

JPA提供了几种查询数据的方法。 可以根据各种标准&#xff08;例如&#xff0c;所使用的语言&#xff08;SQL与JPQL&#xff09;或查询是静态的&#xff08;编译时间&#xff09;还是动态的&#xff08;执行时间&#xff09;&#xff09;对此类替代方案进行分类。 静态查询是使…

深入理解DOM节点关系

前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构。节点分为12种不同类型&#xff0c;每种类型分别表示文档中不同的信息及标记。每个节点都拥有各自的特点、数据和方法&#xff0c;也与其他节点存在某种关系。节点之间的关系构成了层次&#xff0c;而所有页面标记则…

Windows服务编写

摘要&#xff1a;几乎所有的操作系统在启动的时候都会启动一些不需要与用户交互的进程&#xff0c;这些进程在Windows中就被称作服务。它由服务程序、服务控制程序&#xff08;&#xff33;&#xff23;&#xff30;&#xff0c;service control program&#xff09;和服务控制…

1031 查验身份证 (15 分)

#include <iostream> #include <string> using namespace std; int main() {int n, i, sum 0, cnt 0; // 这是为零很重要string s;int w[17] { 7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2 };char z[11] { 1, 0, X, 9, 8, 7, 6, 5, 4, 3, 2 };cin >> n;getcha…

分布式锁(基于redis和zookeeper)详解

分布式锁&#xff08;基于redis和zookeeper&#xff09;详解 https://blog.csdn.net/a15835774652/article/details/81775044 为什么写这篇文章&#xff1f; 目前网上大部分的基于zookeeper&#xff0c;和redis的分布式锁的文章都不够全面。要么就是特意避开集群的情况&#xf…

深入理解this机制系列第三篇——箭头函数

前面的话 this机制与函数调用有关&#xff0c;而作用域则与函数定义有关。有没有什么是可以将this机制和作用域联系起来的呢&#xff1f;本文将介绍ES6新增的内容——箭头函数 痛点 对于闭包的痛点在于&#xff0c;闭包的this默认绑定到window对象&#xff0c;但又常常需要访问…

C# CheckedListBox控件的用法

最近用到checklistbox控件&#xff0c;在使用其过程中&#xff0c;花了较多的时间&#xff0c;这里我收集了其相关的代码段&#xff0c;希望对大家有所帮助。1.添加项checkedListBox1.Items.Add("蓝色"); checkedListBox1.Items.Add("红色"); checkedListB…