样式表有三种方式

内嵌样式（inline Style） ：是写在Tag里面的，内嵌样式只对所有的Tag有效。

内部样式（internal Style Sheet）：是写在HTML的里面的，内部样式只对所在的网页有效。

外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。 最常用的是style属性，在JavaScript中，通过document.getElementById(id).style.XXX就可以获取到XXX的值，但意外的是，这样做只能取到通过内嵌方式设置的样式值，即style属性里面设置的值。

 

解决方案：引入currentStyle,runtimeStyle,getComputedStyle style 标准的样式,可能是由style属性指定的！

runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！

currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了（仅限IE） 如：document.getElementById("test").currentStyle.top

要兼容FF，就得需要getComputedStyle 出马了

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
  #p1 {width: 100px;height: 200px;color: #09c;}
 </style>
</head>
 
<body>
<p id="p1" style="margin:10px;">HHHH</p>
<script>
 function getStyle(obj, attr)  
{  
 
    if(obj.currentStyle)  
    {  
       return obj.currentStyle[attr];  //只适用于IE
    }  
    else  
    {  
       return getComputedStyle(obj,false)[attr];   //只适用于FF,Chrome,Safa
    }  
return obj.style[attr]; //本人测试在IE和FF下没有用,chrome有用
}  
 
 window.onload=function()  
{  
//调用
    var oDiv=document.getElementByIdx_x('p1');  
//alert(getStyle(oDiv,'width'));
alert(getStyle(oDiv,'margin-left'));
} 
//查询了相关资料发现问题如下：
//style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。 
//currentStyle可以弥补style的不足，但是只适用于IE。
//getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。
//
//注意：
//currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
//如果要设置相应值，应使用style。
 
</script>
</body>
</html>
 
二、获取css操作方法
1.用JS修改标签的 class 属性值：document.getElementByIdx_x( "tt" ).className = "txt"; 
2.用JS修改标签的 style 属性值：document.getElementByIdx_x( "t2" ).style.color = "red"; 
 
原文参考http://blog.sina.com.cn/s/blog_89cd68470101i108.html
 

style,currentStyle和getComputedStyle的区别的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. style，currentStyle，getComputedStyle的区别和用法

    先说说层叠样式表的三种形式(三种的叫法不一,按照各自的习惯): 一.内联样式:在HTML标签用style属性设置.如: 1 <p >这是内联样式</p> 二.嵌入样式:通过&l ...

  7. JavaScript获取HTML元素样式的方法（style、currentStyle、getComputedStyle）

    一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...

  8. style、currentStyle、getComputedStyle区别介绍

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

  9. style、currentStyle、getComputedStyle(不同浏览器获取css样式)区别介绍

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

随机推荐

  1. linux下C++的man文件安装

    GCC提供了一份c++的man文档,地址:ftp://gcc.gnu.org/pub/gcc/libstdc++/doxygen/ 下载最新版的文档,比如:libstdc++-api.20140403 ...

  2. XCode5中新建工程后强制使用了ARC，如何去掉？

    打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...

  3. CGameConfig类

    #ifndef __GAMECONFIG_H__ #define __GAMECONFIG_H__ #include "GameFrameHead.h" #include &quo ...

  4. ISTQB测试人员认证 初级（基础级）大纲

    ISTQB测试人员认证 初级(基础级)大纲 ---中文修订版本1(2015年5月6日) 2015-06-22 大纲pdf下载  ISTQB资料中心 在课程大纲中,每个章节都会提供相应的认知水平要求: ...

  5. JAVA-Word转PDF各种版本实现方式

    当下做一个项目,就是各种操作office,客户的需求总是各种不按常理,来需求就得搞啊.对JAVA操作office这方面真是头大,弟弟是真滴不懂不会啊.无奈只好试啊试的.网上一大堆好使的,一大堆不好使的 ...

  6. 在容器中使用erase函数，迭代器的处理

    在c++编程中,用到迭代器的时候,往往不知道如何删除当前迭代器指向的元素. erase函数:   返回下一个迭代器. 只使用vector的erase函数,记住,该函数是迭代器失效,返回下一个迭代器. ...

  7. Eclipse中安装JBoss Tools插件

    1.先访问JBoss Tools网站,看看上面怎么说: http://tools.jboss.org -> 进入下载界面 看到下面这句话: Drag and drop this  icon in ...

  8. scala 测试类

    class NetworkUtilTest extends FunSuite with Matchers { test("testIp2Int") { val ip = Netwo ...

  9. http协议之报文详解

    一. 概述 用于HTTP协议交互的信息被称为HTTP报文.请求端(客户端)的http报文叫做请求报文,响应端的叫做响应报文. 报文,是网络中交换和传输的数据单元,即站点一次性要发送的数据块.报文包含了 ...

  10. Latex之希腊字母表 花体字母 实数集

    花体字母 \mathcal{x} 实数集字母 \mathbb{R} 转自:http://blog.csdn.net/lanchunhui/article/details/49819445 拉丁字母是2 ...