getComputedStyle的应用

时间:2023-02-05 07:51:54

后面有例子,所以把HTML,CSS样式写在前面

HTML结构:

<div id="myDiv" style="background-color: lightseagreen; border: 5px solid #ccc;"></div>

CSS样式:

#myDiv{
width: 200px;
height: 200px;
background-color: red;
}

1.先来解释下getComputedStyle

getComputedStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算样式。

其语法:

getComputedStyle的应用

接受两个参数:参数1 element表示用于计算样式的元素;参数2 pseudoElt表示伪元素,若没有可用null代替

上面信息参考自这里 。

另外通过查找其他一些资料看到也有这样写的:

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

与之前的语法相比参数相同,不同之处很明显不用说了吧。window与document.defaultView有什么区别呢,稍等去查下资料。

要补充一点,参数2可省略不写。

2.兼容性

getComputedStyle()方法兼容性放面还是不错滴,来人!上证图!

getComputedStyle的应用

如图,除了不兼容IE8之前的,其他主流浏览器都兼容,可以放心大胆的使用了。

“等等,这位小哥,那IE6~8怎么办?”

“这个嘛,有办法!”

3.currentStyle支持IE6~8

在IE中,每个具有style属性的元素还有一个currentStyle属性。

其语法是:element.currentStyle.attribute或element.currentStyle['attribute'];

div.currentStyle.width;

或者

div.currentStyle['width'];

4.该说说defaultView了

defaultView是什么鬼,还真不知道,马上Google一下在mozilla上查到一点信息:在浏览器中,该属性返回当前 document 对象所关联的 window 对象,如果没有,会返回 null

兼容性方面:根据 quirksmode,IE 9 以下版本不支持 defaultView

测试一下与window的关系

alert(document.defaultView==window);//true

返回的结果是true,哇咔咔咔再测测全等于是不是返回的也是true

alert(document.defaultView===window);//true

弹出的结果也是true。

既然这样我干嘛不用语句短的那个呢。由语法一得知getComputedStyle()方法本身就存在于window全局对局对象中,是不是可以这样写

var comput = getComputedStyle(div);    

经测试完全可以!

5.style

style用于获取或设置元素的内联样式,内部样式和外部样式用style是获取不到的。

获取内部样式的height属性值:

alert(div.style.height);

弹出结果如图:

getComputedStyle的应用

获取内联样式:

alert(div.style.border);

弹出结果如图:

getComputedStyle的应用

显然可以获取得到,不知道细心的你发现没有我在内联样式设置的border颜色使用十六进制设置的弹出的却是rgb格式的。测试主要是在Google浏览器,又试了火狐、Opera、Safari浏览器测试返回的都是rgb格式(IE因为没有条件暂时没有测试,有兴趣的可以测一下)。

6.总结

叨叨了不少,来个总结吧!

getComputedStyle()获取的是计算机(浏览器)计算后的样式,兼容除IE6~8之外的其他主流浏览器,只读。

currentStyle仅支持IE浏览器,作用与getComputedStyle一样,但是用法不同。

style用于获取或设置元素的内联样式,内部样式和外部样式用style则获取不到。

有错误或表达不准确之处,欢迎指正。

getComputedStyle的应用的更多相关文章

  1. currentStyle与getComputedStyle应用

    getComputedStyle获取的是计算机(浏览器)计算后的样式,但是不兼容IE6.7.8(主要用于非IE浏览器) currentStyle方法兼容IE6.7.8,但是不兼容标准浏览器(主要用于I ...

  2. JS使用getComputedStyle&lpar;&rpar;方法获取CSS属性值

    在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...

  3. style,currentStyle,getComputedStyle的区别和用法

    先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...

  4. getComputedStyle&sol;currentStyle&sol;style之间的爱恨情仇

    getComputedStyle是? getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  5. getComputedStyle 方法

    一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...

  6. 【CSS进阶】原生JS getComputedStyle等方法解析

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  7. JavaScript getComputedStyle

    我们使用 element.style 也可以获取元素的CSS样式声明对象,但是其与 getComputedStyle 方法还是有一些差异的. 首先,element.style 是可读可写的,而 get ...

  8. getComputedStyle的简单用法

    var number=window.getComputedStyle("元素").style样式名

  9. JavaScript中style&comma; currentStyle和 getComputedStyle的异同

    今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...

随机推荐

  1. 路由 - ASP&period;NET MVC 4 系列

           软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...

  2. 天气预报API&lpar;一&rpar;:全国城市代码列表(&OpenCurlyDoubleQuote;旧编码”)

    说明 2016-12-09 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页... 还发现城市编码有两种,暂且称中国天气网这些编码为旧标准 "旧编码"的特征是 9个字符长度 ...

  3. mysql下mysqladmin日常管理命令总结

    mysqladmin 工具的使用格式:mysqladmin [option] command [command option] command ......参数选项:-c number 自动运行次数统 ...

  4. ACM水题

    ACM小白...非常费劲儿的学习中,我觉得目前我能做出来的都可以划分在水题的范围中...不断做,不断总结,随时更新 POJ: 1004 Financial Management 求平均值 杭电OJ: ...

  5. 树莓派&lpar;raspberry pi&rpar;学习4&colon; 更改键盘布局(转)

    树莓派(raspberry pi)用了几次后,发现键盘老是按错,一些字符打不出来或打错 这个问题,折腾我半天.还是把心得分享一下吧 上网查,发现是键盘布局不对,树莓派(raspberry pi)是英国 ...

  6. 华科机考:a&plus;b

    时间限制:1秒     空间限制:32768K 题目描述 实现一个加法器,使其能够输出a+b的值. 输入描述: 输入包括两个数a和b,其中a和b的位数不超过1000位. 输出描述: 可能有多组测试数据 ...

  7. C语言内存四区的学习总结(二)---- 堆区

    接上篇,内存四区的分析-静态区,下面来说明一下堆区总结. 堆区分析: 堆区(heap):一般由程序员分配释放(动态内存申请与释放),若程序员不释放,程序结束时可能由操作系统回 就下面的程序: #inc ...

  8. 源发行版 1&period;8 需要目标发行版 1&period;8以及usage of api documented as &commat;since 1&period;8&plus;

    Maven项目每个Module都有单独的pom.xml,如果不在pom.xml中进行配置,则默认将Module的Language Level设置为5.所以要在pom.xml文件中添加插件进行配置. & ...

  9. Stanford&colon; Creating a Hadoop-2&period;x project in Eclipse

    Creating a Hadoop-2.x project in Eclipse http://snap.stanford.edu/class/cs246-data-2014/hw0.pdf Hado ...

  10. Oracle 日志归档 自动清理

    exp emis/emis@orcl file=d:\backup\oracle\oracle%date:~0,10%.dmp owner=emis log=d:\backup\oracle\orac ...