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 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- android获取设备屏幕大小的方法
// 通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay( ...
- 解决导入lib,关联源码问题
关联源代码:在libs目录下新建文件,以jar包全名(包括.jar)为文件名称,以.properties结尾 在文件中新建键值对:src=jar包源代码绝对路径:根据提示将单斜线变成双斜线, 然后cl ...
- rspec学习01
1.安装rspec 2.基本构造 rspec用关键字describe和it,所以我们可以象正常会话一样去表达一个想法. describe方法创建了一个用例组,在describe所在的代码块里,你可以用 ...
- duang体加班版
领导第一次让我加班的时候,其实我是拒绝的,因为我觉着加班这个事,不能你让我加我就加,晚了就没有地铁了..领导跟我说可以打车报销.加了一个月之后,我的钱包duang~,后来我知道报销其实是假的,我每天打 ...
- java 泛型学习
http://blog.csdn.net/archie2010/article/details/6232228 学习集合框架的时候经常用hasmap<Integer,Integer>就是泛 ...
- LaTeX中参考文献管理以及注意事项
注意:版权所有,转载请注明出处 使用LaTeX写作,很重要的一个部分就是参考文献的制作,LaTeX使用bibtex管理文章的参考文献,bibtex即是一种工具,又是一种格式的代表,它要求使用*.bib ...
- ADO数据库链接
一.数据库操作准备 // --------------------------------------------------------------------------------------- ...
- nginx简单双机热备：backup参数的使用
nginx简单双机热备:backup参数的使用 nginx简单双机热备:backup参数的使用
- thinkphp I方法取传参
/** * 获取输入参数 支持过滤和默认值 * 使用方法: * <code> * I('id',0); 获取id参数 自动判断get或者post * I('post.name','','h ...
- SQL server 创建表，索引，主键，外键
if object_id('student', 'U') is not null drop table student go create table student( sno varchar(20) ...