• 用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. Thread.currentThread()和this的区别——《Java多线程编程核心技术》

    前言:在阅读<Java多线程编程核心技术>过程中,对书中程序代码Thread.currentThread()与this的区别有点混淆,这里记录下来,加深印象与理解. 具体代码如下: pub ...

  2. 修改CentOS默认yum源为国内yum镜像源

    CentOS默认的yum源不是国内的yum源,在通过yum安装一些软件的时候,会出现这样那样的错误,以及在下载安装的速度上也是非常慢的. 所以这个时候就需要将yum源替换成国内的yum源,国内主要开源 ...

  3. 【js】统计数组中某些项的个数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. （四）surging 微服务框架使用系列之网关 转载

    一.什么是API网关 API网关是一个服务器,是系统对外的唯一入口.API网关封装了系统内部架构,为每个客户端提供一个定制的API.API网关方式的核心要点是,所有的客户端和消费端都通过统一的网关接入 ...

  5. robotframework使用中的一些注意事项

    1.关于\的转义.使用\\ 2.关于字符串的合并 3.切换到iframe,切出iframe 4.对对象右键点击 5.对对象实现按键操作,在处理一些下拉对象时需要用到. 6.当元素定位十分困难的时候,需 ...

  6. nginx 配sorry page - error page

    include conf.d/*.conf; server { listen 9999; server_name 127.0.0.1; location / { root html; index er ...

  7. centos 7 java1.8安装

    java安装 检查版本信息,如果版本小于1.8,执行以下命令 java -version java version "1.8.0_144"Java(TM) SE Runtime E ...

  8. 朱晔和你聊Spring系列S1E9：聊聊Spring的那些注解

    本文我们来梳理一下Spring的那些注解,如下图所示,大概从几方面列出了Spring的一些注解: 如果此图看不清楚也没事,请运行下面的代码输出所有的结果. Spring目前的趋势是使用注解结合Java ...

  9. 通过 Systemd Journal 收集日志

    随着 systemd 成了主流的 init 系统,systemd 的功能也在不断的增加,比如对系统日志的管理.Systemd 设计的日志系统好处多多,这里笔者就不再赘述了,本文笔者主要介绍 syste ...

  10. socketserver + ftp

    --------------------------------------------生活不止眼前的苟且,还有诗和远方的田野. day 29 socketserver + ftp # # ----- ...