获取样式getComputedStyle

大家都知道，用document.getElementById(‘element‘).stylexxx可以获取元素的样式信息，
可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。

DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：
复制代码 代码如下:

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

这样，就能在IE及FF中返回对象的当前样式信息了。

特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制的‘#ffffff‘，而FF返回的是rgb(255,255,255)

时间： 2024-10-29 19:07:30

获取样式getComputedStyle的相关文章

JS之获取样式

基本代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ color:yellow; } </style> </head> <body> <div style="width:100

javascript 获取样式表里的属性值 currentStyle 和 getComputedStyle 的使用

很多时候我们要获取 CSS 样式表里面的值(非行间样式),而获取行间样式的属性值那么这用 obj.style.attr 就能获取得到,那么怎么样才能获取到CSS样式表里面的值呢,那么就要请出我们的主角 currentStyle 和 getComputedStyle ,简要的介绍一下他们,再封装一个函数来兼容各个浏览器. 介绍: currentStyle :这个属性是 IE 浏览器上使用的. getComputedStyle :这个方法是 搞基 浏览器上使用的. 封装: //这里的 obj 参数指

利用原生JavaScript获取样式的方式小结

来源:http://www.ido321.com/930.html ps:是获取样式,不是设置样式.若没有给元素设置样式值,则返回浏览器给予的默认值.(论坛整理) 1.element.style:只能获取写在元素标签中的style属性里的样式值,无法获取到定义在<style></style>和通过<link href="css.css">加载进来的样式属性 1: var ele = document.getElementById('ele'); 2:

JS动画之缓冲动画与多物体动画即获取样式的方法

一.缓冲动画Ps1:opacity:所有浏览器都支持 opacity 属性.注释:IE8 以及更早的版本支持替代的 filter 属性.例如:filter:Alpha(opacity=50).Ps2:缓冲运动的速度值一定要转换成整数,不然将到达不了终点,是用Math.ceil(),还是Math.floor(),要看就提情况.Ps3:动画大致模版(思路):            window.onload = function(){            var oDiv = document.g

兼容的获取样式的函数getStyle()

想要得到某个元素的某个样式属性,可以用: 1 <div id="div01" style="color:red">123</div> 2 3 var ele = document.getElementById("div01"); 4 console.log(ele.style.color); 但这样只能得到写在元素上的行内样式,对于link进来的样式文件或<style></style>中写的样式是获

js如何获取样式？

在某个项目中,我们经常会需要来获取某个元素的样式,比如说获取一个div的color:这样,新的问出现了, var style = box.style.width;console.log(style);如果我们写的是行内的样式,可以轻松通过这种方式来获得所需要的样式,不过,如果我们的样式是内联或者外联样式,就取不到了: <script type="text/javascript"> window.onload=function(){ //获取行间样式 var oDiv=doc

20150912 javascript事件-获取样式

<!doctype html> <html><head><meta charset="utf-8"><title>无标题文档</title><style> #div1{widht:200px;height:200px; background:#f00; border:4px solid black;}</style> <script> window.onload=function

获取样式的简单的函数封装

var CSS = { getStyle:function(elem,name){//获取样式 if(elem.style[name]){ return elem.style[name]; } else if(elem.currentStyle){ return elem.currentStyle[name]; } else if(document.defaultView && document.defaultView.getComputedStyle){ name = name.repl

使用JavaScript获取样式的属性值

1 . 在js中可以使用style属性来获取样式的属性值(只能获取内联样式的属性值) 语法格式为: HTML元素.style.样式属性; 2 .   在IE浏览器中,使用currentStyle来获取属性值 语法格式为: HTML元素.currentStyle.样式属性: 3 . DOM提供了一个getComputedStyle()方法来获取属性值, Firefox,Opera,Safari,Chrome等浏览器支持(IE浏览器不支持) 语法格式: document.defaultView.ge