• 用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. MySQL高级知识（十）——批量插入数据脚本

    前言:使用脚本进行大数据量的批量插入,对特定情况下测试数据集的建立非常有用. 0.准备 #1.创建tb_dept_bigdata(部门表). create table tb_dept_bigdata( ...

  2. Django-rest-framework 接口实现 权限:(Permission)

    权限:(Permission) rest_framework 中 已经定义好了 权限 在 from rest_framework.permissions 中查看所有的权限 from rest_fram ...

  3. yum安装提示Another app is currently holding the yum lock; waiting for it to exit...

    在Linux系统中使用yum安装软件时,提示yum处于锁定状态 Another app is currently holding the yum lock; waiting for it to exi ...

  4. 2.03-handler_openner

    import urllib.request def handler_openner(): #系统的urlopen并没有添加代理的功能所以需要我们自定义这个功能 #安全 套接层 ssl第三方的CA数字证 ...

  5. 爬取伯乐在线文章（四）将爬取结果保存到MySQL

    Item Pipeline 当Item在Spider中被收集之后,它将会被传递到Item Pipeline,这些Item Pipeline组件按定义的顺序处理Item. 每个Item Pipeline ...

  6. java xml文件中相同Id遍历

    import java.io.File;import java.util.List;import org.dom4j.Document;import org.dom4j.DocumentExcepti ...

  7. Emacs 自动补全插件 ycmd

    Emacs 自动补全,最好的插件当属 ycmd.以下记录我的安装过程. 1. 安装 ycmd server github 官方地址: https://github.com/Valloric/ycmd ...

  8. postman简介及基本用法

    从分层测试角度来说,接口测试是相对来说性价比最高的,且作为功能测试进阶的必备技能,接口测试值得大家都去学习掌握. 工欲善其事,必先利其器,好的工具能更好的帮助工程师更高效率的完成工作. 常见的接口测试 ...

  9. odoo10学习笔记

    odoo的API: Odoo新API的介绍与应用: odoo新api的实现是借助于python装饰器.新API的装饰器主要有以下几种: model,multi,one,constrains,depen ...

  10. java 基础04 重写