getComputedStyle

function getStyle(elem, property) {
            // ie通过currentStyle来获取元素的样式,其他浏览器通过getComputedStyle来获取
            //svar that = this;
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem,false)[property] : elem.currentStyle[property];
        }
var div1=document.getElementById("#div1");
		console.log(div1);
		console.log(getStyle(div1,‘width‘));

代码在运行的时候报出错误,

Uncaught TypeError: Failed to execute ‘getComputedStyle‘ on ‘Window‘: parameter 1 is not of type ‘Element‘.
    at getStyle (ts1.html:37)
    at

起初以为是getComputedStyle的使用方面出现了问题,了解一些知识后,并没有错误。这时,再看报出的错误信息提示,“无法解析Window上的getComputedStyle:参数1不是element类型”,这时尝试console.log("div1"),果然是null.于是去查了getElementById的用法,果然,是因为在参数里面多添加了一个#,去掉#,一切正常。

时间: 2024-11-02 15:53:49

getComputedStyle的相关文章

深入理解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 re

JS使用getComputedStyle()方法获取CSS属性值

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style="-"),而无法获取定义在<style type="text/css">里面的属性. 2. IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法 "DOM2级样式"

getComputedStyle与currentStyle获取样式(style/class)

大家都知道,用document.getElementById(‘element').style.xxx可以获取元素的样式信息,可是它获取的只是DOM元素style属性里的样式规则,对于通过class属性引用的外部样式表,就拿不到我们要的信息了. DOM标准里有个全局方法getComputedStyle,可以获取到当前对象样式规则信息,如:getComputedStyle(obj,null).paddingLeft,就能获取到对象的左内边距.但是事情还没完,万恶的IE不支持此方法,它有自己的一个实

document.defaultView.getComputedStyle

我们在使用js过程中,有时候需要获取对象的宽度,如果对象本身是由内容撑开.宽度未知的情况,有一个强大的方法document.defaultView.getComputedStyle()可以获取对象的css样式:他返回的是一个CSS样式对象. 使用:document.defaultView.getComputedStyle(a, b);a这对象是要想要获取的对象.b,伪类,若果不是则为null. div{ width: 100px; font-size: 15px; } <div>遇见他,她变得

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

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

js用currentStyle和getComputedStyle获取css样式(非行间) 兼容ie与火狐

用js的style属性可以获得html标签的样式,但是不能获取非行间样式.那么怎么用js获取css的非行间样式呢?在IE下可以用currentStyle,而在火狐下面我们需要用到getComputedStyle.下面是js代码. function getStyle(obj, name) { if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj,false)[name];

currentstyle 和 getComputedStyle—JS学习笔记2015-6-17(第59天)

getComputedStyle 和 currentStyle 获得到的是计算机(浏览器)计算后的样子: ie8 以及更早ie浏览器,无法兼容该方法: 可以使用currentStyle  // 不过标准浏览器下却不兼容: 这两种方法的适用范围和注意事项(以后会有解决方案,比如正则, 学东西不要死板): 复合样式获取不到,会有兼容性问题,比如:background 想到得到背景颜色, 应该是backgroundColor 获取单一样式,而不要获取复合样式 不要有空格: 不要获取未设置后的样式:不兼

getComputedStyle和currentStyle

1 /*alert(div.style.width)*/ //null 2 3 function getstyle(obj,name){ 4 if(obj.currentStyle) { 5 return obj.currentStyle[name]; 6 } else { 7 return getComputedStyle(obj,null)[name]; 8 } 9 } 10 alert(getstyle(div,'width')) 11 } 兼容ie 和非ie浏览器的获取样式写法 : zI

style、currentStyle、getComputedStyle区别介绍

样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表(External Style Sheet):指引入以.css为后缀的CSS文件,.最常用的是style属性,即在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到 XXX的值,但意外的是,这样做只能取到通过

获取元素CSS值之getComputedStyle方法熟悉

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(