Getting an element's style
It is occasionally useful to get a specific element's actual style, after all CSS rules have been applied. You might
naively assume that an element's style property will give you this, but you would be mistaken. That only returns the
contents of the element's style attribute. To get the final style (including any styles defined in external stylesheets),
you need to use the getComputedStyle function.
To illustrate this, let's create a simple test page. It defines a style for all <p> elements, but then one of the <p>
elements overrides that with its style attribute.
<html>
<head>
<title>Style test page</title>
<style type="text/css">
p { background−color: white; color: red; }
</style>
</head>
<body>
<p id="p1">This line is red.</p>
<p id="p2" style="color: blue">This line is blue.</p>
</body>
</html>
Example: Get the styles defined by an element's style attribute
var p1elem, p2elem;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
alert(p1elem.style.color); // will display an empty string
alert(p2elem.style.color); // will display "blue"
That wasn't terribly helpful, and you should never use element.style to get individual styles. (You can use it to set
individual styles; see Setting an element's style.)
So what should you use instead? getComputedStyle().
Example: Get the actual style of an element
var p1elem, p2elem, p1style, p2style;
p1elem = document.getElementById('p1');
p2elem = document.getElementById('p2');
p1style = getComputedStyle(p1elem, '');
p2style = getComputedStyle(p2elem, '');
alert(p1style.color); // will display "rgb(255, 0, 0)"
alert(p2style.color); // will display "rgb(0, 0, 255)"
分享到：
相关推荐
js获取可见元素的尺寸还是比较方便的，这个可以直接使用这个方法： 代码如下:function getDefaultStyle(obj,attribute){ // 返回最终样式函数，兼容IE和DOM，设置参数：元素对象、样式特性 return obj.currentStyle...
function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行...
obj.currentStyle[attr]:getComputedStyle(obj)[attr]; } 2.事件event兼容写法 [removed] = function(e){ var e = e || window.event; } 3.事件监听的兼容写法 function bindEvent(dom,ev,fn){ if(dom.add
要想获取HTML元素的计算样式一直都存在很多的兼容问题，各浏览器都会存在一些... 代码如下:var getStyle = function( elem, type ){ return ‘getComputedStyle’ in window ? getComputedStyle(elem, null)[type] :
_.currentStyle[$]:document.defaultView.getComputedStyle(_,false)[$]}function P(_,$){if(_)if($!=null)_.style.display=$;else return R(_,"display")}function I(G,_){var D=G.el?G.el.nodeName:"INPUT";if(_||...
具体代码如下：Js代码 代码如下:function getCss(elem, css){ if (window.getComputedStyle) { return window.getComputedStyle(elem, null)[css]; }else if (elem.currentStyle) { return elem.currentStyle...
大家一听这名字就知道，有了这套框架 网上的效果基本都是可以实现的。实际上之前的运动框架还是有局限性的，... return getComputedStyle(obj, null)[name]; } } function startMove(obj, attr, iTarget) { clearInt
var style = window.getComputedStyle( vanilla, null ) var o = {}; this.each(["height", "width", "left", "top"], function( index, name ) { o[name] = +style .getPropertyValue( name ) .slice
IE6与其他浏览器兼容，取非行间样式2： function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } }
声明，该DEMO依托于某个培训机构中，非常感谢这个培训结构。话不多说，现在开始改demo的制作。 ... return window.getComputedStyle(obj,null)[attr];//为了获取W3C浏览器下的属性值 } } function
本文实例为大家分享了js仿360开机效果的具体代码，供大家参考，具体内容如下 ... function getStyle(obj,attr){ //兼容性写法获得样式 if(window.getComputedStyle){ return window.getComputedStyle(obj, null
本文实例为大家分享了js轮播图之旋转木马效果的具体代码，供大家参考，具体内容如下 ...function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr
querySelectorAll('li').forEach(function(){ var color = getComputedStyle(this).getPropertyValue('--myColor'); // getPropertyValue is extended to handle custom properties // draw_the_Element() })...
//获取元素的真实的，最终的CSS样式属性值的函数 function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if...
function getStyle(elem,name){ if(elem.style[name]){ return elem.style[name]; }else if(elem.currentStyle){ return elem.currentStyle[name]; }else if(document.defaultView&&document.defaultView....
function getStyle(element, attr) { if (element.currentStyle) { return element.currentStyle[attr];//傻逼IE的获取元素的方法 } else { return getComputedStyle(element, null)[attr]; } } 平
function getStyle(obj,name) { if(obj.currentStyle){ return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name]; } } //获取非行间样式和行间样式 //缓冲运动框架 var
本文实例讲述了原生js实现的移动端可拖动进度条插件功能。分享给大家供大家参考，具体如下： ...笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便... this.width = parseInt(window.getComputedStyle(this.
eclipse-testng 离线包 ... indent="yes" omit-xml-declaration="yes" doctype-public="-//W3C//DTD XHTML 1.0 ... return document.defaultView.getComputedStyle(elem, null).getPropertyValue(prop); } } ...
function getStyle(elem, cssprop, cssprop2){ if(elem.currentStyle){ return elem.currentStyle[cssprop] }else if(document.defaultView && document.defaultView.getComputedStyle){ return document....