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. Android网络框架-Volley实践 使用Volley打造自己定义ListView

    这篇文章翻译自Ravi Tamada博客中的Android Custom ListView with Image and Text using Volley 终于效果 这个ListView呈现了一些影 ...

  2. form.submit 方法 并不会触发 form.onsubmit 事件

    做表单的时候发现一个奇怪的地方,总结下: form.submit 方法 并不会触发 form.onsubmit 事件,看代码: <body> <div class="con ...

  3. oninput事件(解决onkeyup无法监听到复制黏贴)

    change事件需要两个条件触发: a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效) b)当前对象失去焦点(onblur)  keypress  能监听键盘事件,但鼠标复制黏贴操作就 ...

  4. css 横线中间添加文字

      demoline01.02选一个用足够了 <style> .demo_line_01 { width: 200px;/*这指的是文字的宽度*/ padding: 0 20px 0; m ...

  5. iOS与导航相关的都在这

    // 设置导航背景图片 (一旦设置背景图片(变为不透明),透明层不起作用) [self.navigationBar setBackgroundImage:[UIImage imageNamed:@&q ...

  6. link options and how g++ is invoked gcc g++

    yum install gcc yum install gcc-c++ yum reinstall gcc gcc-c++ Downloading packages:(1/2): gcc-c++-4. ...

  7. Lock wait timeout exceeded; try restarting transaction 3千万数据删除

    Lock wait timeout exceeded; try restarting transaction 0DELETE FROM sta_addr WHERE date="2018-1 ...

  8. javaweb项目中嵌入webservice--axis2

    由于最近项目中需要搭建webservice服务端,由于原项目是javaweb项目,所以需要整合.之前用cxf试了,启动老是报错,maven依赖冲突.后来索性换成axis2 百度了一圈,下面这个博客 h ...

  9. js身份证号有效性验证

    1.简述 最近做的系统有用到实名验证的,起初对于用户身份证号只是简单地使用正则表达式进行验证, 很多无效的身份证号就成了漏网之鱼. 导致后台存表里很多无效的身份证号,随便输入用户名和身份证号就可以实名 ...

  10. python 作用域知识点整理

    1.块级作用域 想想此时运行下面的程序会有输出吗?执行会成功吗? 1 2 3 4 5 6 7 8 9 10 11 12 #块级作用域   if 1 == 1:     name = "lzl ...