• 用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. ES5-ES6-ES7_数值的扩展

    二进制与八进制数值表示法: 二进制用0b, 八进制用0o console.log(0b1010) console.log(0o56) Number.isFinite(i) 判断是否是有限大的数 con ...

  2. [HEOI2016/TJOI2016]字符串

    嘟嘟嘟 今天复习一下SAM. lcp固然不好做,干脆直接翻过来变成后缀.首先答案一定满足单调性,所以我们二分lcp的长度\(mid\),然后判断\(s[d \ldots d + mid - 1]\)是 ...

  3. 转:// LINUX下为ORACLE数据库设置大页--hugepage

    一.在解释什么情况下需要开启大页和为啥需要开启大页前先了解下Linux下页的相关的知识:以下的内容是基于32位的系统,4K的内存页大小做出的计算1)目录表,用来存放页表的位置,共包含1024个目录en ...

  4. 使用 ctypes 进行 Python 和 C 的混合编程

    Python 和 C 的混合编程工具有很多,这里介绍 Python 标准库自带的 ctypes 模块的使用方法. 初识 Python 的 ctypes 要使用 C 函数,需要先将 C 编译成动态链接库 ...

  5. Mac OS 安装Wget

    没有Wget的日子是非常难过的,强大的Mac OS 下安装Wget非常简单 下载一个Wget的源码包,http://www.gnu.org/software/wget/ 安装与配置 1. 首先下载一个 ...

  6. for或者while的标记循环

    for或者while的标记循环 今天在写代码的时候,发现一个for循环前有一个字母,不知道这个是什么语法,后来查了一下,这个语法是用来实现标记循环的功能 这个是代码块 r:for(int rowNum ...

  7. 《Python神经网络编程》中文版PDF+英文版PDF+源代码,业界良心书

    下载:https://pan.baidu.com/s/1hI6wMPq4UFvEmpgF3ZV1jg 关于内容 这本书主要揭示神经网络背后的概念,并介绍如何通过Python实现神经网络.全书主要讲了三 ...

  8. 【重磅干货整理】机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总

    [重磅干货整理]机器学习(Machine Learning)与深度学习(Deep Learning)资料汇总 .

  9. Jmeter实例(二)简单的性能测试场景

    我们在性能测试过程中,首先应该去设计测试场景,模拟真实业务发生的情境,然后针对这些场景去设计测试脚本.为了暴露出性能问题,要尽可能的去模拟被测对象可能存在瓶颈的测试场景. 我在本地部署了一个项目,可以 ...

  10. prometheus排错

    1.导入grafana模板后node-export某些图像无法获取到data: 解决:导入grafana 模板是需要看node-export 版本是否与模板要求的一致,不同版本的node-export ...