JavaScript强化教程——style、currentStyle、getComputedStyle区别介绍

本文为 H5EDU 机构官方 HTML5教程,主要介绍:JavaScript强化教程 —— style、currentStyle、getComputedStyle区别介绍 style、currentStyle、getComputedStyle区别介绍 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。

内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对所在的网页有效。

外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。

解决方案:引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的!

runtimeStyle 运行时的样式!如果与style的属性重叠,将覆盖style的属性!

currentStyle 指 style 和 runtimeStyle 的结合! 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE) 如:document.getElementById("test").currentStyle.top

要兼容FF,就得需要getComputedStyle 出马了

注意: getComputedStyle是firefox中的, currentStyle是ie中的. 比如说

<style></p>

mydiv {

 width : 300px;

} </style> 则:

var mydiv = document.getElementById('mydiv'); if(mydiv.currentStyle) { var width = mydiv.currentStyle['width']; alert('ie:' + width); } else if(window.getComputedStyle) { var width = window.getComputedStyle(mydiv , null)['width']; alert('firefox:' + width); } 另外在FF下还可以通过下面的方式获取

1 2 document.defaultView.getComputedStyle(mydiv,null).width; window.getComputedStyle(mydiv , null).width;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之margin

1、margin与容器尺寸   元素尺寸:①可视尺寸 clientWidth(标准);②占据尺寸 ?   margin与可视尺寸:①适用于没有设定width/h...

3466
来自专栏大前端_Web

块格式化上下文(BFC)布局规则及常见情景

Box是CSS布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box组成的。元素的类型和display属性,决定了这个Box的类型。 不同类型的Box...

833
来自专栏九彩拼盘的叨叨叨

Flex布局 写法示例

491
来自专栏吴裕超

js行内式遇到的一些问题 DOM对象和jq对象转换的问题

这两天给后台页面做页面,我的工作比较简单,只需要写结构和样式就行了,写好之后,后端大哥用ajax重写页面加载数据,顺便给标签添加选中事件,做选中后变色的处理,但...

2445
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 8 自定义指令

AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。 前面提到AngularJS的四大特性:   1 MVC ...

1739
来自专栏柠檬先生

jquery 表单事件

.blur()    当元素失去焦点的时候触发事件。   .blur(handler(eventObject))     handler(even...

1739
来自专栏前端知识分享

第25天:js-封装函数-淘宝鼠标展示

703
来自专栏Golang语言社区

厚土Go学习笔记 | 26. 函数闭包

如果非必要,尽量不要在程序中使用闭包。 go函数可以是一个闭包。闭包是一个函数值,它引用了函数体之外的变量。这个函数可以对这个变量进行访问和赋值。 展示一个例子...

34713
来自专栏Rindew的iOS技术分享

iOS objectView.removeFromSuperview之后if(self.objectView)仍然成立?

2015
来自专栏C/C++基础

VS2012使用条件断点和内存断点

如果对a打下断点,那么每次循环的时候都会触发一次断点。此时我们可以为断点设置触发它的条件,使它满足指定条件时才触发。

852

扫码关注云+社区