先介绍下层叠样式表的三种形式:

1.内联样式，在html标签中style属性设置。

<p style="color:#f90">内联样式</p>

2.嵌入样式，通过在head标签设置style标签添加样式。

<style type="text/css">

    .stuff{color:#f90;}

</style>

3.外部样式，通过link标签引入外部样式

<link type="text/css" rel="stylesheet" href="path/style.css" />

/*style.css*/

@charset "utf-8";

.stuff{color:#f90;}

进入正题。

style属性获取样式值，使用方法：obj.style.attr

style只能获取元素的内联样式，内部样式和外部样式使用style都获取不到。

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

    <style type="text/css">

        #stuff{width:300px;}

    </style>

    <link rel="stylesheet" href="a.css">

</head>

<body>

    <div id="stuff">Hello world</div>

    <script type="text/javascript">

        var stuff = document.getElementById('stuff');

        //如果只设置外部样式和内嵌样式获取的是空值

        alert(stuff.style.width);//400px

</script>

</body>

</html>

//外部样式

@charset "utf-8";

#stuff{width:100px;}

currentStyle和getComputedStyle方法既可以获取内联样式，也可以获取外部样式和内嵌样式的值。获取的顺序是内联样式->外部样式->内嵌样式。他们之间的区别是currentStyle只适用于IE浏览器，getComputedStyle适用于Firefox、Opera、Safari、Chrome浏览器。使用方法:

//currentStyle

var style = obj.currentStyle['attr']或obj.currentStyle.attr

//getComputedStyle

var style = getComputedStyle(obj, pseudoElt)['attr']或getComputedStyle(obj, pseudoElt).attr

其中，pseudoElt表示如:after, :before之类的伪类元素，如果不用伪类的话设置为null即可。

//为了浏览器的兼容性，可以封装成一个函数使用

function getStyle(obj, attr){

    if(obj.currentStyle){

        return obj.currentStyle['attr'];

    }else{

        return getComputedStyle(obj, null)['attr'];

    }

}

getComputedStyle、currentStyle和style的区别是:

getComputedStyle和currentStyle只能获取属性值，无法设置属性。如果想设置属性值，可是使用ob.style.attr.

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

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

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

  2. 元素高度、宽度获取 style currentStyle getComputedStyle getBoundingClientRect

    1.示例代码 (1)html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  3. 用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

    CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...

  4. 浅谈style.,currentStyle,getComputedStyle,getAttribute

    xxx为属性. ele为元素. 1.style.是针对于样式 在前面的一篇博客中我也有说到,ele.style.xxx; 通常用于赋值,赋值也是针对于行内样式,用它来取值的话,它只能取到内联样式. 今 ...

  5. 图论中DFS与BFS的区别、用法、详解…

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

  6. 图论中DFS与BFS的区别、用法、详解？

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

  7. Position属性四个值：static、fixed、absolute和relative的区别和用法

    Position属性四个值:static.fixed.absolute和relative的区别和用法 在用CSS+DIV进行布局的时候,一直对position的四个属性值relative,absolu ...

  8. Python中内置数据类型list,tuple,dict,set的区别和用法

    Python中内置数据类型list,tuple,dict,set的区别和用法 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, ...

  9. angularjs中provider，factory，service的区别和用法

    angularjs中provider,factory,service的区别和用法 都能提供service,但是又有差别 service 第一次被注入时实例化,只实例化一次,整个应用的生命周期中是个单例 ...

随机推荐

  1. new 与override 区别

    using System;using System.Collections.Generic;using System.Linq;using System.Text; namespace Newover ...

  2. Java：多线程，线程池，使用CompletionService通过Future来处理Callable的返回结果

    1. 背景 在Java5的多线程中,可以使用Callable接口来实现具有返回值的线程.使用线程池的submit方法提交Callable任务,利用submit方法返回的Future存根,调用此存根的g ...

  3. C# 读写INI 文件

    INI 格式: [Section1] KeyWord1 = Value1 KeyWord2 = Value2 ... [Section2] KeyWord3 = Value3 KeyWord4 = V ...

  4. MySQL数据表修复, 如何修复MySQL数据库(MyISAM / InnoDB)

    常用的Mysql数据库修复方法有下面3种: 1. mysql原生SQL命令: repair 即执行REPAIR TABLE SQL语句 语法:REPAIR TABLE tablename[,table ...

  5. extjs几种常用方法

    1,提交 这种情况一般用于登录界面,也在表单提交应用比较多,大多是一个Button的提交事件,代码为: var loginForm =........; if (loginForm .form.isV ...

  6. 【转】VC的MFC中重绘函数的使用总结（整理）

    原文网址:http://www.cnblogs.com/x8023z/archive/2008/12/09/mfc33.html 在刷新窗口时经常要调用重绘函数MFC提供了三个函数用于窗口重绘Inva ...

  7. oracle查询语句2【转载】

    本文使用的实例表结构与表的数据如下: scott.emp员工表结构如下:   SQL> DESC SCOTT.EMP; Name     Type         Nullable Defaul ...

  8. JavaScript高级程序设计21.pdf

    第10章 DOM DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口) IE中所有DOM对象都是以COM对象的形式实现的,这意味着IE中的对象与原生JavaScript对象 ...

  9. [转载]jquery的extend和fn.extend

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展j ...

  10. Circle - SGU 130（递推）

    题目大意:一个圆上有2K个点,用K个线把他们连接起来,求出这些线最少可以把这个圆分成P部分,有N种分割方法.输出N和P. 分析:分割线一定是相互不相交的线,所以可以把这写分成两部分,f[i] += f ...