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. Laravel5.1 搭建博客 --展示简单的首页

    今天起开始搭建博客,把之前学的东西运用下. 1 创建 配置项目 1.1 创建项目 composer create-project laravel/laravel blog 5.1.1 1.2 配置数据 ...

  2. zoj3497(经典矩阵乘法)

    原以为是用搜索做的题,想了好久都无法想到一个高效正确的解法. 后面发现竟然这就是矩阵的应用! 碉堡! 给定一个有向图,问从A点恰好走k步(允许重复经过边)到达B点的方案数mod p的值  ——选自ma ...

  3. windosw启动redis

    1.cmd控制台 cd C:\Program Files\Redis 2.redis-server.exe redis.windows.conf 3. ok!!

  4. less-!important关键字

    //!important关键字 使用!important关键字混入调用之后,以标记它继承的所有属性!important,example: .test{ background:red; font-siz ...

  5. idle命令行按ALT+P重复调出上个语句

    idle命令行按ALT+P重复调出上个语句

  6. php 正则表达式一.函数解析

    php正则表达式官方手册参考....... 一.php中 常用的正则表达式函数 1.preg_match与preg_match_all preg_match: 函数信息 preg_match_all: ...

  7. Pipeline inbound

    精进篇:netty源码死磕7  巧夺天工--Pipeline入站流程详解 1. Pipeline的入站流程 在讲解入站处理流程前,先脑补和铺垫一下两个知识点: (1)如何向Pipeline添加一个Ha ...

  8. 线程池ThreadPoolExecutor参数设置

    线程池ThreadPoolExecutor参数设置 JDK1.5中引入了强大的concurrent包,其中最常用的莫过了线程池的实现ThreadPoolExecutor,它给我们带来了极大的方便,但同 ...

  9. Virtualbox报错------>make sure the kernel module has been loaded successfully

    错误描述 很久没有用virtualbox了,今天打算在virtualbox上安装一个Ubuntu系统的时候,新建好Ubuntu后启动的时候,直接报错: Cannot access the kernel ...

  10. 搭建ss的步骤

    1. 购买vultr产品 购买地址 (这个比较稳定) 2. 更改ssh的端口,混淆一下,我改成了2333 vim /etc/ssh/sshd_config 将里面的port改为2333 更改防火墙规则 ...