后面有例子,所以把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对象,其中包含当前元素的所有计算样式。
其语法:
接受两个参数:参数1 element表示用于计算样式的元素;参数2 pseudoElt表示伪元素,若没有可用null代替
上面信息参考自这里 。
另外通过查找其他一些资料看到也有这样写的:
var style = document.defaultView.getComputedStyle(element,[pseudoElt]);
与之前的语法相比参数相同,不同之处很明显不用说了吧。window与document.defaultView有什么区别呢,稍等去查下资料。
要补充一点,参数2可省略不写。
2.兼容性
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);
弹出结果如图:
获取内联样式:
alert(div.style.border);
弹出结果如图:
显然可以获取得到,不知道细心的你发现没有我在内联样式设置的border颜色使用十六进制设置的弹出的却是rgb格式的。测试主要是在Google浏览器,又试了火狐、Opera、Safari浏览器测试返回的都是rgb格式(IE因为没有条件暂时没有测试,有兴趣的可以测一下)。
6.总结
叨叨了不少,来个总结吧!
getComputedStyle()获取的是计算机(浏览器)计算后的样式,兼容除IE6~8之外的其他主流浏览器,只读。
currentStyle仅支持IE浏览器,作用与getComputedStyle一样,但是用法不同。
style用于获取或设置元素的内联样式,内部样式和外部样式用style则获取不到。
有错误或表达不准确之处,欢迎指正。
getComputedStyle的应用的更多相关文章
-
currentStyle与getComputedStyle应用
getComputedStyle获取的是计算机(浏览器)计算后的样式,但是不兼容IE6.7.8(主要用于非IE浏览器) currentStyle方法兼容IE6.7.8,但是不兼容标准浏览器(主要用于I ...
-
JS使用getComputedStyle()方法获取CSS属性值
在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下: 1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属 ...
-
style,currentStyle,getComputedStyle的区别和用法
先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...
-
getComputedStyle/currentStyle/style之间的爱恨情仇
getComputedStyle是? getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...
-
getComputedStyle 方法
一:getComputedStyle getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclarat ...
-
【CSS进阶】原生JS getComputedStyle等方法解析
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
-
JavaScript getComputedStyle
我们使用 element.style 也可以获取元素的CSS样式声明对象,但是其与 getComputedStyle 方法还是有一些差异的. 首先,element.style 是可读可写的,而 get ...
-
getComputedStyle的简单用法
var number=window.getComputedStyle("元素").style样式名
-
JavaScript中style, currentStyle和 getComputedStyle的异同
今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...
随机推荐
-
路由 - ASP.NET MVC 4 系列
软件开发人员常常对一些细小的细节问题倍加关注,由其在考虑源代码的质量和结构时更是如此.因此,当遇到大部分使用 ASP.NET 技术构建的站点,使用如下的 URL 地址时,可能会有些奇怪: ...
-
天气预报API(一):全国城市代码列表(“旧编码”)
说明 2016-12-09 补充 (后来)偶然发现中国天气网已经有城市ID列表的网页... 还发现城市编码有两种,暂且称中国天气网这些编码为旧标准 "旧编码"的特征是 9个字符长度 ...
-
mysql下mysqladmin日常管理命令总结
mysqladmin 工具的使用格式:mysqladmin [option] command [command option] command ......参数选项:-c number 自动运行次数统 ...
-
ACM水题
ACM小白...非常费劲儿的学习中,我觉得目前我能做出来的都可以划分在水题的范围中...不断做,不断总结,随时更新 POJ: 1004 Financial Management 求平均值 杭电OJ: ...
-
树莓派(raspberry pi)学习4: 更改键盘布局(转)
树莓派(raspberry pi)用了几次后,发现键盘老是按错,一些字符打不出来或打错 这个问题,折腾我半天.还是把心得分享一下吧 上网查,发现是键盘布局不对,树莓派(raspberry pi)是英国 ...
-
华科机考:a+b
时间限制:1秒 空间限制:32768K 题目描述 实现一个加法器,使其能够输出a+b的值. 输入描述: 输入包括两个数a和b,其中a和b的位数不超过1000位. 输出描述: 可能有多组测试数据 ...
-
C语言内存四区的学习总结(二)---- 堆区
接上篇,内存四区的分析-静态区,下面来说明一下堆区总结. 堆区分析: 堆区(heap):一般由程序员分配释放(动态内存申请与释放),若程序员不释放,程序结束时可能由操作系统回 就下面的程序: #inc ...
-
源发行版 1.8 需要目标发行版 1.8以及usage of api documented as @since 1.8+
Maven项目每个Module都有单独的pom.xml,如果不在pom.xml中进行配置,则默认将Module的Language Level设置为5.所以要在pom.xml文件中添加插件进行配置. & ...
-
Stanford: Creating a Hadoop-2.x project in Eclipse
Creating a Hadoop-2.x project in Eclipse http://snap.stanford.edu/class/cs246-data-2014/hw0.pdf Hado ...
-
Oracle 日志归档 自动清理
exp emis/emis@orcl file=d:\backup\oracle\oracle%date:~0,10%.dmp owner=emis log=d:\backup\oracle\orac ...