1、obj.style只能获得内嵌样式（inline Style）就是写在Tag里面的，他访问不到那些链接的外部css和在head中用<style>声明的style。
所以必须认识到在那些使用外部Css文件的页面中，如果用style赋值，如obj.style=“color:red”;显然效果是正确的，其中的奥秘确是只是在该对象的tag上多添加了一个style属性，按照由小到大的优先级呈现罢了。

2、obj.currentStyle就强大多了，他能够获取关于这个节点所有位置的style，但是他也按照优先级，说穿了就是显示的是什么他就是指向哪一个style，如下代码字体优先是显示blue的，那currentStyle.color就是blue，当然此时style.color也会是blue。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>testStyle</title>

<style>

.lala{

color:yellow;

}

</style>

</head>

<body>

<div id="tt" style="color:blue;" class="lala">1111</div>

</body>

<script>

alert(document.getElementById("tt").currentStyle.color);

</script>

</html>

若去掉以上<div>中的style为<div id="tt" class="lala">1111</div>，那么currentStyle.color就根据优先级变成了yellow，但是此时style.color为空。

3、runtimeStyle简单的说就是你可以对一个节点的样式赋值，他将成为最高优先级的节点样式。
如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>

.lala{

color:yellow;

}</style>

</head>

<body>

<div id="tt" style="color:blue;" class="lala">1111</div>

</body>

<script>

document.getElementById("tt").runtimeStyle.color="black";

alert(document.getElementById("tt").currentStyle.color);

alert(document.getElementById("tt").runtimeStyle.color);

alert(document.getElementById("tt").style.color);

</script>

</html>

此时页面显示字的颜色是runtimeStyle赋值后的black。但是只有currentStyle.color和runtimeStyle本身能够取到这个值,style.color取到的依然是tag中的blue。

4.DOM标准里有个全局方法getComputedStyle，可以获取到当前对象样式规则信息，如：getComputedStyle(obj,null).paddingLeft，就能获取到对象的左内边距。但是事情还没完，万恶的IE不支持此方法，它有自己的一个实现方式，那就是currentStyle，不同于全局方法getComputedStyle，它是作为DOM元素属性存在的，如：obj.currentStyle.paddingLeft，在IE中就获取到对象的左内边距了，兼容性的写法如下：

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

这样，就能在IE及FF中返回对象的当前样式信息了。

特别注意一点：如果要获取当前对象的颜色信息，IE返回的是16进制的'#ffffff'，而FF返回的是rgb(255,255,255)

style、 currentStyle、 runtimeStyle、getComputedStyle区别分析的更多相关文章

  1. style、currentStyle、getComputedStyle区别介绍

    style.currentStyle.getComputedStyle区别介绍 来自:蓝色天空 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有 ...

  2. javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)

    样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效.   (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...

  3. js便签笔记（7）——style、currentStyle、getComputedStyle区别介绍【转载】

    转者语: 今天看jQuery源码CSS部分,里面用到了currentStyle和getComputedStyle来获取外部样式. 因为elem.style.width只能获取elem的style属性里 ...

  4. style,currentStyle和getComputedStyle的区别

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...

  5. js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法

    用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补style的不足(可获取内联样式,内部样式和外部样式),但是只适用于IE. g ...

  6. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  7. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

  8. JavaScript中style, currentStyle和 getComputedStyle的异同

    今天在做项目的时候,习惯性的用到了element.style.width,然而浏览器却报错,错误提示是style is undefined,这是我才意识到,内联样式表和外联样式表在js应用中也有很大的 ...

  9. js中style,currentStyle和getComputedStyle的区别

    1.style只能获取元素的内联样式,内部样式和外部样式是获取不到的.例子: <div id="test" style="width:100px;height:20 ...

随机推荐

  1. 在UI线程之外，多线程处理Bitmaps

    多线程处理Bitmaps     上一篇,我们讨论了:Android有效的处理Bitmap,降低内存 ,可是最好不要运行在主线程(UI线程),假设图片是本地的或者网络的又或者是其它地方的. 图片载入的 ...

  2. iOS 修改textholder的颜色

    UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(, , , )]; textField.placeholde ...

  3. [hihoCoder] 拓扑排序·一

    The hints of the problem has given detailed information to implement the topological sorting algorit ...

  4. [Algorithms] Topological Sort

    Topological sort is an important application of DFS in directed acyclic graphs (DAG). For each edge ...

  5. MyBatis 从入门到熟悉.md

    目录 MyBatis从入门到熟悉 MyBatis Generator MyBatis 测试 一对一 一对多 多对多 总结 参考 MyBatis从入门到熟悉 以下代码获取地址: https://gith ...

  6. ffmpeg命令

    1 将mp4格式的视频文件转换成mkv格式 ffmpeg -i input.mp4 -vcodec copy -acodec copy output.mkv

  7. 4.php奇葩的地方，反引号``

    今天我发现我从来没打过这外符号 ` 就是键盘的左上方, 1的左边不需要组合键, 直接按下即可.... 刚开始我还一直在找没找到.....百度一下.才知道

  8. java URL 利用网址api 查出手机号归属地

    手机号码归属地查询api接口 1.淘宝网API地址: http://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=手机号码参数:tel:手机号码返 ...

  9. yield的表达式形式、面向过程编程（grep -rl 'root' /etc）

    一.yield的表达形式 def foo(): print('starting') while True: x=yield None#return 2 print('value :',x) g=foo ...

  10. Django的模型层（2） - 多表操作（下）

    一.多表查询 1.基于双下划线的跨表查询 Django 还提供了一种直观而高效的方式在查询(lookups)中表示关联关系,它能自动确认 SQL JOIN 联系.要做跨关系查询,就使用两个下划线来链接 ...