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 条评论
登录 后参与评论

相关文章

来自专栏猿天地

nginx转发后后端怎么获取用户真实IP

经常有需求要获取访问用户的IP,在经过nginx转发后真实IP就被隐藏起来了,我们需要在头部信息里拿真实IP,下面是拿IP的代码,考虑了各种情况。 public...

3357
来自专栏Python

flask-session组件

简介 flask-session是flask框架的session组件,由于原来flask内置session使用签名cookie保存,该组件则将支持session...

3895
来自专栏大神带我来搬砖

理解HTML工作原理——HTML form隐式提交

有时在HTML页面form的input里按了回车键会提交该表单,并且form的submit按钮的click事件也会被触发.这是什么原理呢?是因为form的隐式提...

2728
来自专栏刘望舒

React Native探索之组件的属性和状态

在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。

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

iOS 禁用emoji系统中文键盘输入失效

1735
来自专栏前端小叙

点击除元素以外的任意地方隐藏元素js

比如想实现点击列表弹出筛选器,点击其他任意地方关闭筛选器,如图 ? 该筛选器class名 1 $(document).click(function () {...

3309
来自专栏后端之路

doctype变化之后

背景 上篇说到一些我们使用了html5的doctype 同时也给出了一些built-in的css 诡异的doctype 给出更多的built-in css ht...

2896
来自专栏王磊的博客

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样...

3246
来自专栏技术博文

nginx 日志获取不到远程访问ip问题解决

公司有一个应用,后端web用的是nginx,nginx 的所有请求都是通过前端的代理转发过来的,所有在日志格式里面 获取远程ip的变量用的是 $http_x_f...

3885
来自专栏前端新视界

Vue.js 系列教程 2:组件,Props,Slots

原文:intro-to-vue-2-components-props-slots 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个...

21410

扫码关注云+社区