深入理解getComputedStyle

  jQuery的css()的底层实现就用到了getComputedStyle这个方法,也许我们用到的很少,但是不得不说这时一个非常强大的函数,下面让我们一探究竟!

第一部分:基本语法

  在mdn上,我们可以看到它是这样定义的:

The Window.getComputedStyle() method gives the values of all the CSS properties of an element after applying the active stylesheets and resolving any basic computation those values may contain.

  即这个方法会返回一个元素的所有属性,无论是我们预先定义的,还是继承的或默认的。

  基本语法如下所示:

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

  它接受两个参数,第一个是一个元素,这时必选的;第一个是伪元素(pseudo element),它是可选的,所以用[]括起来,值得注意的是,如果没有伪元素时,我们可以用null来代替,当然也可以不写null。并且这个方法会返回一个CSSStyleDeclaration对象,它包含了所有的css属性。

第二部分:实例

  正所谓是骡子是马,拉出来遛遛,他有什么用呢?

  在页面的控制台中,在element下给一个元素添加id="testEL",然后再控制台中输入:

console.log(window.getComputedStyle(document.querySelector("#testEL"),null))

  此时,我们可以得到如下的代码:

  

  

时间: 2024-11-08 20:15:03

深入理解getComputedStyle的相关文章

从输入url开始,完善前端体系架构

原文链接: https://segmentfault.com/a/1190000013662126 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系! javascript 前端 232 前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. 关于这道题目的吐槽暂且不提(这是一道被提到无数次的题,得到不少人的赞同,也被很多人反感),本文的

关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的样式,不能读取外联和内联的样式,自己试了一下,果然是这样,自己找的例子是改变ul的width属性,看到的小伙伴可以去试试,对于内嵌的属性是可读写,但是对于内联和外联的属性就是只写,不可读 然后是其他两个,这两个的功能很强大,之所以有两个,是为了要兼容IE obj.currentStyle.prope

【笔记】归纳js getcomputedStyle, currentStyle 以及其相关用法

  好吧,鉴于前端则个行业知识宽度广而深,早期看过高程介绍过的获取元素计算后的最终样式(浏览器显示的最终样式)的方法现在也忘得七七八八了 于是百度了一下,看了一下大神张鑫旭的博客,这里写个随笔记录一下,留作记录 获取元素的样式,我们平常用得最多的方法是 elem.style.xxx属性,此属性既可都又可写,但!它只能获取元素的内嵌样式,所以要获取一个元素的真正样式并不能通过这个方法获取,于是有了下面两个方法: getComputedStyle : (现代浏览器以及ie9+ 的浏览器适用) 1.此

HTML+CSS理解

HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更广泛的设备所访问.更少的代码和组件,容易维 护.改版方便,不需要变动页面内容.提供打印版本而不需要复制内容.提高网站易用性: 2.xhtml和html有什么区别HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML 元素必须被正确地嵌套.

深入理解定位父级offsetParent及偏移大小offsetTop / offsetLeft / offsetHeight / offsetWidth

深入理解定位父级offsetParent及偏移大小 [转载] 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级

深入理解定位父级offsetParent及偏移大小

× 目录 [1]定位父级 [2]偏移大小 [3]页面偏移[4]注意事项 前面的话 偏移量(offset dimension)是javascript中的一个重要的概念.涉及到偏移量的主要是offsetLeft.offsetTop.offsetHeight.offsetWidth这四个属性.当然,还有一个偏移参照——定位父级offsetParent.本文将详细介绍该部分内容 offsetParent定位父级 在理解偏移大小之前,首先要理解offsetParent.人们并没有把offsetParent

CSS魔法堂:你真的理解z-index吗?

一.前言 假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了.但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了.本文作为对W3C Recommendation-Layered presentation学习后整理的笔记,以便日后查阅. 由于将英文名词翻译为中文名词容易产生歧义(如Normal flow被翻译为文档流),因此本文将直接采用原英文名词,而涉及到的英文名词解释如下: non-positioned eleme

深入理解CSS盒模型

如果你在面试的时候面试官让你谈谈对盒模型的理解,你是不是不知从何谈起.这种看似简单的题其实是最不好答的. 下面本文章将会从以下几个方面谈谈盒模型. 基本概念:标准模型 和IE模型 CSS如何设置这两种模型 JS如何设置获取盒模型对应的宽和高 实例题(根据盒模型解释边距重叠) BFC(边距重叠解决方案) 基本概念 盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型. 从上面两图不难看出在标准模型中,盒

灵魂拷问第6篇:谈谈你对重绘和回流的理解

我们首先来回顾一下渲染流水线的流程: 接下来,我们将来以此为依据来介绍重绘和回流,以及让更新视图的另外一种方式——合成. 回流 首先介绍回流.回流也叫重排. 触发条件 简单来说,就是当我们对 DOM 结构的修改引发 DOM 几何尺寸变化的时候,会发生回流的过程. 具体一点,有以下的操作会触发回流: 一个 DOM 元素的几何属性变化,常见的几何属性有width.height.padding.margin.left.top.border 等等, 这个很好理解. 使 DOM 节点发生增减或者移动. 读