Computed Styles

The style object offers no information about the styles that have cascaded from style sheets and affect the element. DOM Level 2 provide a method called getComputedStyle(). This method accepts two arguments: the element to get the computed style for and a pseudo-element string (such as ":after"). The second argument can be null if no pseudo-element information is necessary.  IE doesn‘t support getComputedStyle(), though it has a similar concept. Every element that has a style property also has a currentStyle property.

1 function getStyle(obj, name) {
2     if (obj.currentStyle) {
3         return obj.currentStyle[name];
4     } else {
5         return getComputedStyle(obj, null)[name];
6     }
7 }    
时间: 2024-12-28 21:34:05

Computed Styles的相关文章

[Vue] Update Attributes, Classes and Styles in Vue.js with v-bind

Use v-bind:class and v-bind:style to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using v-bind:style. <body> <div id="card"> <header>{{ title }}</header> &

浏览器的渲染机制

Google Web Fundamentals 是一个非常优秀的文档,里面讲到了跟web.浏览器.前端的方方面面.我总结一下其中的 Ilya Grigorik 写的 Critical rendering path 浏览器渲染机制部分的内容如下: 几个概念 1.DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM. 2.CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构. 3.DOM 和 CSSOM 都是以 Byte

dojo/dom-geometry元素大小

在进入源码分析前,我们先来点基础知识.下面这张图画的是元素的盒式模型,这个没有兼容性问题,有问题的是元素的宽高怎么算.以宽度为例,ff中 元素宽度=content宽度,而在ie中 元素宽度=content宽度+border宽度+padding宽度.IE8中加入了box-sizzing,该css属性有两个值:border-box.content-box分别对应ie和ff中元素宽度的工作方式. 偏移量:offsetLeft.offsetTop.offsetWidth.offsetHeight off

[转]浏览器渲染机制——一定要放在body底部的js引用

转自:http://blog.csdn.net/u012251421/article/details/50536265 说明: 本文提到的浏览器均是指Chrome. “script标签“指的都是普通的不带其他属性的外联javascript. web性能优化的手段并不是非黑即白的,有些手段过头了反而降低性能,所以在讨论条件和结论的时候,虽然很多条件本身会带来其他细微的负面或正面影响,为了不使论述失去重点,不会扩展太开. 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什

Discover browser developer tools

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This art

转---JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

作者:德来 segmentfault.com/a/1190000004292479 如有好文章投稿,请点击 → 这里了解详情 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什么大家普遍把<script src=""></script>这样的代码放在body最底部?(为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例) 应聘者一般会回答:因为浏览器生成Dom树的时候是一行一行读HTML代码的,script标签放在最后面就不

JS一定要放在Body的最底部么?

JS一定要放在Body的最底部么? 时间 2016-01-12 02:00:02 写代码的小德子 原文  http://delai.me/code/js-and-performance/ 主题 JavaScript CSS 一.从一个面试题说起 面试前端的时候我喜欢问一些看上去是常识的问题.比如:为什么大家普遍把 <script src=""></script> 这样的代码放在body最底部? (为了沟通效率,我会提前和对方约定所有的讨论都以chrome为例)

JavaScript 操作CSS

JavaScript 操作CSS 关于CSS的介绍不是本文的内容范围,本文主要介绍如何使用JavaScript操作CSS. 1. 使用JavaScript操作Inline Styles 所有的文档元素都有style属性,我们可以通过直接操作style属性来修改相关元素的样式. 需要注意的是style属性的值并不是一个string对象,而是一个CSSStyleDeclaration对象. 我们可以通过如下方式设置style属性的值. e.style.fontSize = "24pt";

第十三章 事件

事件概念 JS与HTML之间的交互通过事件实现.事件就是文档或浏览器窗口中发生的一些的特定交互瞬间.可以使用侦听器(处理程序)来预定事件.以便事件发生时执行相应的代码. 事件流 事件流 描述的是从页面中接收事件的顺序. I 事件冒泡 IE的事件流叫做事件冒泡,事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,逐级向上传播到较不具体的节点. IE9.FF.chrome.safari冒泡到window对象. <!DOCTYPE html> <html lang="en&