样式表有三种方式

内嵌样式（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. Qt 2D绘图高级篇

    1.拖动模式 在QGraphicView中提供了三种拖动模式,分别是: QGraphicsView::NoDrag :忽略鼠标事件,不可以拖动. QGraphicsView::ScrollHandDr ...

  2. [k8s]metricbeat的kubernetes模块&kube-metric模块

    正确姿势启动metricbeat metricbeat.modules: - module: system metricsets: - cpu - filesystem - memory - netw ...

  3. Android 资源保护问题——探索

    apk文件使用解压工具就能看到drawable等资源,但是有些游戏中的图片资源却是无法看到的. 这个问题探索了许久…… [1]图片资源不放置在drawable文件下,放在assets中(但是解压apk ...

  4. 把一张图片 转成二进制流 用AFNetworking POST 上传到服务器.

    把一张图片 转成二进制流 用AFNetworking POST 上传到服务器. AFHTTPRequestOperationManager *manager = [[AFHTTPRequestOper ...

  5. jquery的liveQuery插件

    一.livequery插件简介 jQuery的事件绑定功能使得jQuery代码与HTML代码能够完全分离,这样代码的层次关系更加清晰,维护起来也更加简单.然而对于动态加载到页面的HTML元素,每次都需 ...

  6. CMWAP上网补丁描述文件！！支持ios9

    由于ios移动4G使用cmnet网络,某些情况下需要使用cmwap,因此就有了这些文字... 两个网址都可以: http://www.clore.net/iphone/cmwap.html https ...

  7. xadmin 问题总结

    pip install django-import-export

  8. Tomcat性能优化(二) 启动参数设置

    一.tomcat绿色版设置方法 进入tomcat/bin目录下,找到catalina.bat文件在文件首行中插入下面这段配置即可. set JAVA_OPTS=-server -Djava.awt.h ...

  9. Unity5.X 新版AssetBundle打包控制

    一.什么是AssetBundle 估计很多人只知道Unity的模型之类的东西可以导出成一种叫做AssetBundle的文件,然后打包后可以在Unity程序运行的时候再加载出来用.那么AssetBund ...

  10. c/c++学习之c++ 中的list <>容器

    http://blog.csdn.net/mazidao2008/article/details/4802617 push 实例化 即添加 http://www.cnblogs.com/BeyondA ...