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 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- 开源网络备份软件 bacula 的安装、配置和运行
安装bacula 1 bacula的几种网络备份拓扑 前面文章介绍了bacula有5个组成部分,在实际的应用中,没有必要将5个部分分别放在不同的服务器上,它们之间的某些部分是可以合并的,常见的bacu ...
- android日历控件(一)
自定义日历并且具备设置今天以前的时间不可点选,以前的颜色和当前的颜色不同,以及获取两次点击日期之间间隔的天数所以说细节比较多 个人习惯,先上图 靠,笔记本不知道怎么回事,禁用到触摸板之后 再次唤醒屏幕 ...
- 最大流算法---Edmond-Karp
这个算法是基于FF方法,就是通过不断求残余网络的增广路来增广流量,直到找不到增广路为止.注意:每次找到增广路以后都要更新原网络.EK算法通过BFS寻找源S到汇T的一条最短路径,因此时间复杂度是O(VE ...
- unity3d Hair real time rendering 真实头发实时渲染
先放上效果 惊现塞拉酱 算法是Weta Digital根据siggraph2003的论文加以改进,改进之前使用的是Kajiya and Kay’s 模型,它能量不守恒,也就是说不是基于物理的,不准确 ...
- iOS 多线程学习笔记 —— NSOperation
本文复制.参考自文章:iOS多线程编程之NSOperation和NSOperationQueue的使用 ,主要为了加强个人对知识的理解和记忆,不做他用.原作者声明: 著作权声明:本文由http://b ...
- 【转】 log4cpp 的使用
[转自] http://sogo6.iteye.com/blog/1154315 Log4cpp配置文件格式说明 log4cpp有3个主要的组件:categories(类别).append ...
- Mac下搭建Eclipse Android开发环境
之前一直是用windows搞android开发,但windows这个性能也真是让人醉了,终于一狠心,砸锅卖铁买了Mac.然后就开始在Mac上搭建android开发环境, 其实也不麻烦,关键是找准下载地 ...
- typedef用法小结
typedef用法小结- - 注意:本文转自网络,版权归原作者所有. typedef typedef用法小结- - 这两天在看程序的时候,发现很多地方都用到typedef,在结构体定义,还有一些数组等 ...
- Google表单
本博文的主要内容有 .Google表单的介绍 https://www.google.com/intl/zh-CN/forms/about/ 自行去注册Google账号,不多,赘述.
- weekend110（Hadoop）的 第七天笔记
(2015年1月31日) 课程目录 01-storm基本概念 02-storm编程规范及demo编写 03-storm的topology提交执行 04-kafka介绍 05-kafka集群部署及客户端 ...