style currentStyle getComputedStyle的区别和用法
先介绍下层叠样式表的三种形式:
1.内联样式，在html标签中style属性设置。
<p style="color:#f90">内联样式</p>
2.嵌入样式，通过在head标签设置style标签添加样式。
<style type="text/css">
.stuff{color:#f90;}
</style>
3.外部样式，通过link标签引入外部样式
<link type="text/css" rel="stylesheet" href="path/style.css" />
/*style.css*/
@charset "utf-8";
.stuff{color:#f90;}
进入正题。
style属性获取样式值，使用方法：obj.style.attr
style只能获取元素的内联样式，内部样式和外部样式使用style都获取不到。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#stuff{width:300px;}
</style>
<link rel="stylesheet" href="a.css">
</head>
<body>
<div id="stuff">Hello world</div>
<script type="text/javascript">
var stuff = document.getElementById('stuff');
//如果只设置外部样式和内嵌样式获取的是空值
alert(stuff.style.width);//400px
</script>
</body>
</html>
//外部样式
@charset "utf-8";
#stuff{width:100px;}
currentStyle和getComputedStyle方法既可以获取内联样式，也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器，getComputedStyle适用于Firefox、Opera、Safari、Chrome浏览器。使用方法:
//currentStyle
var style = obj.currentStyle['attr']或obj.currentStyle.attr
//getComputedStyle
var style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr
其中，pseudoElt表示如:after, :before之类的伪类元素，如果不用伪类的话设置为null即可。 //为了浏览器的兼容性，可以封装成一个函数使用
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle['attr'];
}else{
return getComputedStyle(obj, null)['attr'];
}
}
getComputedStyle、currentStyle和style的区别是:
getComputedStyle和currentStyle只能获取属性值，无法设置属性。如果想设置属性值，可是使用ob.style.attr.
style currentStyle getComputedStyle的区别和用法的更多相关文章
- style，currentStyle，getComputedStyle的区别和用法
先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...
- 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect
1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
- 浅谈style.,currentStyle,getComputedStyle,getAttribute
xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...
- 图论中DFS与BFS的区别、用法、详解…
DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...
- 图论中DFS与BFS的区别、用法、详解？
DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...
- Position属性四个值：static、fixed、absolute和relative的区别和用法
Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...
- Python中内置数据类型list,tuple,dict,set的区别和用法
Python中内置数据类型list,tuple,dict,set的区别和用法 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, ...
- angularjs中provider，factory，service的区别和用法
angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- Sublime Text 2 中文包
下载中文包 大家直接下载吧 http://download.csdn.net/detail/onebelowzero2012/9331981 注意解压路径,一开始我以为D:\MySublime\Sub ...
- 数据结构（莫队算法）：国家集训队2010 小Z的袜子
[题目描述] 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命…… 具体来说,小Z把这N只袜子从1到 ...
- IOS7官方推荐图标和图像尺寸
图标和图像大小 每一个应用程序需要一个应用程序图标和启动图像.此外,一些应用程序需要自定义的图标来表示特定于应用程序的内容,功能,或在导航栏,工具栏和标签栏模式. 不像其他的定制艺术品在您的应用程序的 ...
- TFS 2012使用简介（一）
最近,一直想让团队加入敏捷开发,但TFS2010用下来,并不是令人满意,还好,TFS2012横空出世了.相比TFS2010,TFS2012改进太多了,主要体现在以下方面: Team Web Acces ...
- C++中关于const的思考
在学习C++的过程中,经常被什么时候使用const.为什么使用const以及怎么使用const关键字这样的问题所困扰,以下是我对const的使用总结. 1.值替代 使用#define的确单缺点,第一: ...
- MHz 和 Mbps的区别
Hz是频率单位,例如10Hz就是表示每秒运算10次 Mbps是Million bit per secend (表示每秒传输的兆位数)＝Mb/s MHz 和 Mbps 并不是同一个单位,关键是看bus的 ...
- 在Ubuntu中设置中文输入法
在Ubuntu中设置中文输入法 */--> pre { background-color: #2f4f4f;line-height: 1.6; FONT: 10.5pt Consola,&quo ...
- MFC去掉win7玻璃效果
在MainFrame的OnCreate中添加以下代码 if (CWnd::OnCreate(lpCreateStruct) == -1) return -1; HINSTANCE hInstance ...
- 在LINUX终端和VIM下复制粘贴
http://www.tinylab.org/linux-terminal-and-paste-copy-under-vim/ 在GUI界面下,我们可以很自由的复制粘贴.但是在字符界面下,我们不得不用 ...
- GCC的编译和安装 很好的资料
http://blog.csdn.net/yrj/article/details/492404 1.GCC的编译和安装2.预处理 #define 可以支持不定数量的参数. 例子如下: ...