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

相关文章

来自专栏Python小屋

Python中的枚举类型及其用法

>>> from enum import Enum #导入模块中的类 >>> class Color(Enum): #创建自定义枚举类 red = 1 b...

3448
来自专栏前端知识分享

第138天:Web前端面试题总结(编程)

2、一个页面上两个div左右铺满整个浏览器,要保证左边的div一直为100px,右边的div跟随浏览器大小变化(比如浏览器为500,右边div为400,浏览器为...

803
来自专栏finleyMa

解决setTimeout中的this指向问题

在setInterval和setTimeout中传入函数时,函数中的this会指向window对象。

1575
来自专栏Golang语言社区

Go 语言切片(Slice)

Go 语言切片是对数组的抽象。 Go 数组的长度不可改变,在特定场景中这样的集合就不太适用,Go中提供了一种灵活,功能强悍的内置类型切片("动态数组"),与数组...

3659
来自专栏Java帮帮-微信公众号-技术文章全总结

JS之文档对象模型DOM

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> ...

2686
来自专栏Java Edge

全面入门jQuery最佳实践(二)-jQuery的属性与样式1 .attr()与.removeAttr()2 html()及.text()

每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。

853
来自专栏Golang语言社区

go语言数组的拷贝

go语言的数组与c语言的数据有一点不太一样的地方,go语言的赋值是值拷贝 package main import "fmt" func main...

3349
来自专栏Hongten

HTML DOC

HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直...

511
来自专栏技术博文

jquery对象和dom对象的相互转换

1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jqu...

3404
来自专栏前端知识分享

第26天:js-$id函数、焦点事件

一、函数return语句 定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值。同时,终止代码的执行。 所有自定义函数默认没有返回值...

891

扫码关注云+社区