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 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- Linux Shell编程（21）——复杂命令
更高级的用户命令find-exec COMMAND \;在每一个find 匹配到的文件执行 COMMAND 命令. 命令序列以 ; 结束( ";" 是 转义符 以保证 shell ...
- WebSorcket学习
传统 Web 模式在处理高并发及实时性需求的时候经常采用以下方案: 1.轮询,原理简单易懂,就是客户端通过一定的时间间隔以频繁请求的方式向服务器发送请求,来保持客户端和服务器端的数据同步.问题很明显, ...
- LINUX系统中动态链接库的创建与使用{补充}
大家都知道,在WINDOWS系统中有很多的动态链接库(以.DLL为后缀的文件,DLL即Dynamic Link Library).这种动态链接库,和静态函数库不同,它里面的函数并不是执行程序本身的一部 ...
- 连接池 BoneCPDataSource
一篇连接池不错的文章 http://blog.csdn.net/vincent_czz/article/details/7646392
- （转）WS2008远程桌面连接时提示：“要登录到此远程计算机，您必须被授予允许通过终端服务登录的权限”的解决办法
原文:http://www.chunfengxiyu.com/ws2008-mstsc-privilege.html WS2008远程桌面连接时提示:“要登录到此远程计算机,您必须被授予允许通过终端服 ...
- hdoj 1599 find the mincost route【floyd+最小环】
find the mincost route Time Limit: 1000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/O ...
- jsp的include两种使用方法区别
指令include是将被包含页面中的代码复制粘贴到主页面中,最后编译形成主页面的类文件(一个). 指令include中file属性的值必须是项目中已存在的文件,否则主页面报异常. 指令include如 ...
- winform中DataGridView的数据实现导出excel
1,窗体设计 首先需要引入程序集:Microsoft.Office.Interop.Excel (如果没有引用过的需要右键添加引用再搜索就行了) 实现的方法: /// <summary> ...
- winform 菜单项显示历史记录 分类： WinForm 2014-07-11 18:15 196人阅读 评论(0) 收藏
(1)创建一个项目,将其命名为MenuHistory,默认窗体为Form1. (2)从工具箱中向Form1窗体添加MenuStrip控件,同时向窗体添加OpenFileDialog控件.创建一个&qu ...
- APP安全环节缺失，手游运营商怎样应对APP破解困境
2013年手游行业的规模与收入均实现了大幅增长,发展势头强劲.然而,在手游快速发展的同一时候,因为监管.审核等方面存在着漏洞,手机游戏软件被破解后注入恶意代码.盗取用户財产.窃取用户设备信息的现象屡见 ...