• 用js的style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。
  • currentStyle可以弥补style的不足（可获取内联样式，内部样式和外部样式），但是只适用于IE。
  • getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。

注意：

  • currentStyle和getComputedStyle只能用于获取页面元素的样式，不能用来设置相关值。
  • 如果要设置相应值，应使用style。

兼容方法如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js用currentStyle和getComputedStyle获取css样式</title>

<style type="text/css">

#div1{width:200px; height:200px; background:red;}

</style>

<script type="text/javascript">

function getStyle(obj, attr)

{

    if(obj.currentStyle)

    {

        return obj.currentStyle[attr];  //只适用于IE

    }

    else

    {

        return getComputedStyle(obj,false)[attr];  //适用于FF,Chrome,Safa

    }    

}

window.onload=function()

{

    var oDiv=document.getElementById('div1');

    alert(getStyle(oDiv,'width'))

}

</script>

</head>  

<body>

<div id="div1" style="width:100px;"></div>

</body>

</html>

js中style,currentStyle和getComputedStyle的区别以及获取css样式操作方法的更多相关文章

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

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

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

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

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

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

  4. style,currentStyle和getComputedStyle的区别

    样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式(internal Style Sheet):是写在HTML的里面的,内部样式只对 ...

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

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

  6. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  7. js中style.display=""无效的解决方法

    本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多 ...

  8. 【前端】js中new和Object.create()的区别

    js中new和Object.create()的区别 var Parent = function (id) { this.id = id this.classname = 'Parent' } Pare ...

  9. JS中的== 、===的用法和区别。

    JS中的== .===的用法和区别.[转] == 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 . 而  === 和 !== 只有在相同类型下,才会比较其值 ======= ...

随机推荐

  1. Insert Into 语句的语法错误

    错误示意: 一开始程序是: 改正: 一条很简单的插入语句竟然会报错,然而直接在数据库的查询中执行中却没有问题,这个问题困扰了不少时间. 数据库使用的是ACCESS,INSERT INTO语句为inse ...

  2. 启动线程用start方法

    启动线程用start方法而不是用run方法 public static void main(String[] args) { Thread t=new Thread("Thread-TEST ...

  3. UVA12558-Efyptian Fractions(HARD version)(迭代加深搜索)

    Problem UVA12558-Efyptian Fractions(HARD version) Accept:187  Submit:3183 Time Limit: 3000 mSec  Pro ...

  4. [JOISC2014]挂饰

    嘟嘟嘟 这题其实还是比较好想的,就是有一个小坑点. 首先钩子多的排在前面,然后就是dp了. dp方程就是\(dp[i][j]\)表示到了第\(i\)建物品,还剩\(j\)个挂钩的最大喜悦值.转移就很显 ...

  5. Request Body可以反复读取的方法

    org.springframework.web.filter.HiddenHttpMethodFilter:过滤器已经读取流了,因此想频繁读取流的话,自定义Filter必须在org.springfra ...

  6. 【转】TCP和SOCKET关系

    socket是TCP/IP协议的API   TCP是数据的介质,Socket是TCP的介质. 查了一下RFC文档,Socket是RFC147,更新时间是1971年.TCP是RFC793,更新时间是19 ...

  7. 路飞学城-Python开发集训-第1章

    学习体会: 在参加这次集训之前我自己学过一段时间的Python,看过老男孩的免费视频,自我感觉还行,老师写的代码基本上都能看懂,但是实际呢?....今天是集训第一次交作业的时间,突然发现看似简单升级需 ...

  8. 003_python内置的@staticmethod详解

    python中的staticmethod 主要是方便将外部函数集成到类体中,美化代码结构,重点在不需要类实例化的情况下调用方法(类似java的静态方法) 如果你去掉staticmethod,在方法中加 ...

  9. 6-MVC结构简介

    一.javeEE的项目结构层次:MVC1.Model:模型层(DAO+业务层) 2.View:视图层 jsp3.Control:控制层 servlet 二.分层的原则:1.层与层之间松耦合,层内保持高 ...

  10. 吴恩达课后作业学习2-week3-tensorflow learning-1-基本概念

    参考:https://blog.csdn.net/u013733326/article/details/79971488 希望大家直接到上面的网址去查看代码,下面是本人的笔记  到目前为止,我们一直在 ...