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 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...
随机推荐
- VM Depot 镜像新增系列III – 社交媒体，内容管理 与 项目协同系统
发布于 2014-06-30 作者 刘 天栋 对于架设可协同作业的网站平台, Windows Azure有着得天独厚的优势.这不仅在于其强大的扩展性和安全性,更重要的是 Azure 平台对各类 ...
- 【狼】openGL 光照的学习
小狼学习原创,欢迎批评指正 http://www.cnblogs.com/zhanlang96/p/3859439.html 先上代码 #include "stdafx.h" #i ...
- 使用QJM部署HDFS HA集群
一.所需软件 1. JDK版本 下载地址:http://www.oracle.com/technetwork/java/javase/index.html 版本: jdk-7u79-linux-x64 ...
- octopress 如何添加youku视频和本地视频（octopress how to add a youku video or a local video）
用octopress 官方的video tag 可以添加视频,但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程. 首先添加youku.rb文件到路径:oc ...
- linux下swftools 的配置
1.安装所需的库和组件.机器之前安装过了,主要安装的是下面几个组件.如果不安装会提示machine `x86_64-unknown-linux' not recognized yum install ...
- mysql 引擎区分
MySQL常用的存储引擎为MyISAM.InnoDB.MEMORY.MERGE,其中InnoDB提供事务安全表,其他存储引擎都是非事务安全表. MyISAM是MySQL的默认存储引擎.MyISAM不支 ...
- Domino - SGU 101 （欧拉路径）
题目大意:这是一个多米诺骨游戏,这个游戏的规则就是一个连着一个,现在给出 N 个多米诺,每个多米诺两边都有一个编号,相邻的多米诺的编号要一致,当然多米诺是可以翻转的(翻转就加‘-’,不翻转是‘+’), ...
- 自己动手画一个HTML5的按钮
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- java中的上转型对象
1. 定义 如果B类是A类的子类或间接子类,当用B类创建对象b并将这个对象b的引用赋给A类对象a时,如: A a;a = new B();ORA a;B b = new B();a = b; 通俗的说 ...
- 你的Jsp页面有黄×么，有黄色问号么?Multiple annotations found at this line: - Invalid location of tag (form). - No
jsp页面有黄色问号代表我们的html标签不符合规范 对于很多人拿到页面美工给的页面,有时候很多都有黄色的问号. 为什么会这样呢? Multiple annotations found at this ...