样式表有三种方式

内嵌样式（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. android:Notification实现状态栏的通知

    在使用手机时,当有未接来电或者新短消息时,手机会给出响应的提示信息,这些提示信息一般会显示到手机屏幕的状态栏上. Android也提供了用于处理这些信息的类,它们是Notification和Notif ...

  2. 深入理解Spark 2.1 Core （十一）：Shuffle Reduce 端的原理与源代码分析

    http://blog.csdn.net/u011239443/article/details/56843264 在<深入理解Spark 2.1 Core (九):迭代计算和Shuffle的原理 ...

  3. ntoj 808 蚂蚁的难题(八)

    蚂蚁的难题(八) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5 描述 蚂蚁是一个古玩爱好者,他收藏了很多瓶瓶罐罐. 有一天,他要将他的宝贝们一字排开, 摆放到一个长度为L的展 ...

  4. swift 继承和构造器

    继承 class Vehicle { var numberOfWheels: Int var maxPassengers: Int func description() -> String { ...

  5. centOS7 配置DNS上外网

    CentOS7 linux下DNS的永久性添加 I.网上很多讲的dns的永久性添加其实都是暂时性添加,重启网卡后就会丢失.代码如下: echo nameserver 8.8.8.8 > /etc ...

  6. 彻底征服 Spring AOP 之 理论篇

    基本知识 其实, 接触了这么久的 AOP, 我感觉, AOP 给人难以理解的一个关键点是它的概念比较多, 而且坑爹的是, 这些概念经过了中文翻译后, 变得面目全非, 相同的一个术语, 在不同的翻译下, ...

  7. 改进cocos2dx中lua读ccb的方法

    cocos2dx自带的CCBProxy真弱,还好提供了一个CCBReaderLoader.lua,但是也不好用, 于是修改了一下CCBReaderLoader,下面直接贴代码了. function N ...

  8. Spring Mvc中DispatcherServlet和Servlet的区别小结

    在web开发过程中开始接触的是servlet,用来处理用户请求.这几年随着spring 框架越来越成熟,几乎成了java web开发界的主流框架.既然这么受欢迎肯定有它的优点,spring框架在原来的 ...

  9. Android——Android studio项目中如何查看R.java文件（转）

    Android Studio 是Google推出的一个Android开发环境,它集成了Android 开发工具用于开发和调试,类似 Eclipse ADT.Google公司停止对eclipse的后续支 ...

  10. select 5种子句介绍

    一.Where 条件查询 ①where expression 用法:expression为真,则该行取出 运用场合 各种条件查询场合,如按学号查学生,按价格查商品,按发布时间查新闻等 ②select ...