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. 上传文件ie7

    https://www.cnblogs.com/front-end-develop/p/6214818.html 第一步:html中引入jQuery-1.7.1.js和ajaxFileUpload.j ...

  2. Jmeter JDBC执行多条SQL

    今天在编写自动化回归脚本的时候,需要在jmeter的jdbc请求中执行多条sql,在百度里搜索了一些文章,按照网上提供的步骤,发现不起作用,后来发现是作者的截图误导了,为了让后面的同学少走弯路,这里我 ...

  3. 1.0_搭建PHP服务器环境的步骤

    a,下载安装一款静态web服务器,ex:HTTPD,IIS; b,下载安装PHP引擎: c,在静态服务器配置一下,声明PHP引擎的存在. 注意,以上三步可以用xampp套件来完成. 启动Apache, ...

  4. [Algorithms] Counting Sort

    Counting sort is a linear time sorting algorithm. It is used when all the numbers fall in a fixed ra ...

  5. 把配置和环境解耦 eliminate “works on my machine” problems when collaborating on code with co-workers docker架构与解决的问题

    Docker实践 - 懒人的技术笔记 - 博客频道 - CSDN.NET  http://blog.csdn.net/lincyang/article/details/43055061 Docker直 ...

  6. > >> 将错误输出到文件

    将错误输出到文件 转载:https://blog.csdn.net/woshinia/article/details/18040063 1.覆盖写入: echo "日志内容"  & ...

  7. 【我的Android进阶之旅】解决Android Studio启动时报错：Java 1.8 or later is required.

    错误描述 在公司电脑上运行Android Studio 2.2已经有一段时间了,但是自己的笔记本上还是用的Android Studio 1.5,今天晚上下了一个Android Studio 2.2压缩 ...

  8. 我的Android进阶之旅------&gt;Android无第三方Jar包的源代报错：The current class path entry belongs to container ...的解决方法

    今天使用第三方Jar包afinal.jar时候.想看一下源码,无法看 然后像加入jar相应的源代码包.也无法加入相应的源代码,报错例如以下:The current class path entry b ...

  9. servlet 文件下载

    [本文简介] 一个servlet 文件下载 的简单例子. [文件夹结构] [java代码] package com.zjm.www.servlet; import java.io.BufferedIn ...

  10. SPL(Standard PHP Library 标准PHP类库)

    SplFileObject 读取大文件从第N行开始读: $line = 10; $splFileObj = new SplFileObject(__FILE__,'r'); $splFileObj-& ...