场景

你要获取某一元素的样式，可是没有获取到，返回的值为undefined，可是有时候又能成功？

为什么？

因为，xx.stly.xxx 可以获取的样式信息，是dom元素style属性里的样式，对于通过<style>标签，或外部样式表定义的，我们就无法获取了。当然，js给予的也是dom。

怎么办？

dom标准里有个全局方法  getComputedStyle 。可以获取到当前对象样式规则信息，这还不算完，因为IE不支持。。。

IE有自己的 currentStyle 所以，你要兼容他们，怎么做？

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body,html{

            height: 100%;

        }

        body{

            background-color:red;

            background-image:url(实验.png)

        }

    </style>

</head>

<body>

<div id="div1" style=''></div>

</body>

<script type="text/javascript">

window.onload = function(){

    function t (obj,sx) {

        if(obj.currentStyle){

            return obj.currentStyle[sx];

        }else{

            return getComputedStyle(obj,false)[sx];

        }

    }

        var body =document.getElementsByTagName('body');

        body[0].style.backgroundImage ="url(实验.png)";

        alert(t(body[0],"backgroundColor"));

        }

    </script>

</html>

大家可以试试。

获取元素样式 currentStyle 和 getcomputedStyle的更多相关文章

  1. 函数return/获取元素样式/封装自己的库

    一:函数return <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...

  2. JavaScript获取元素样式

    原生的JavaScript获取写在标签内部的样式很简单: <div class="test" id="test" style="width:10 ...

  3. javascript 获取元素样式的方法

    javascript 获取元素样式常用方法. Javascript获取CSS属性值方法:getComputedStyle和currentStyle  1 .对于元素的内联CSS样式(<div s ...

  4. 原生js获取元素样式

    摘要: 我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之 ...

  5. 转贴：获取元素CSS值之getComputedStyle方法熟悉

    获取元素CSS值之getComputedStyle方法熟悉 一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyVal ...

  6. Vue 获取元素样式 元素高度

    看到这个问题我第一时间想的竟然是JS 不知道你是怎么想的 不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了 我当时问他为什么不用JS获取 他说 这个性能更高 那我们来看看这个高性能的获取元素高 ...

  7. Js获取元素样式值(getComputedStyle&currentStyle)兼容性解决方案

    因为:style(document.getElementById(id).style.XXX)只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. 一般js获取内部样式和外部样式使用 ...

  8. js学习笔记7----return，arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

  9. 获取元素CSS值之getComputedStyle方法熟悉

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2378 一.碎碎念~前 ...

随机推荐

  1. openstack 正常流量

  2. HDU5407.CRB and Candies（数论）

    官方题解: The problem is just to calculate g(N) = LCM(C(N,0),C(N,1),...,C(N,N)) Introducing function f(n ...

  3. TCP、UDP、IP包头结构分析（转）

    1.TCP数据段格式 TCP是一种可靠的.面向连接的字节流服务.源主机在传送数据前需要先和目标主机建立连接.然后,在此连接上,被编号的数据段按序收发.同时,要求对每个数据段进行确认,保证了可靠性.如果 ...

  4. php中的$_SERVER从哪来

    前几个月学了个tcpdump抓包命令,遇到任何问题总想试试,真是程序员的终级武器呀,它像显微镜一下,把任何的丑陋的bug都显示在你的面前. 为什么有题目中所说的疑问呢?因为我发现在不同的环境下面,我获 ...

  5. FormMove

    private    { Private declarations }    procedure WMMOVE(var Msg: TMessage); message WM_MOVE;  proced ...

  6. PERCONA-TOOLKIT 工具的安装与使用2

    [root@server-mysql ~]# cd /usr/bin [root@server-mysql bin]# ls pt* pt-align pt-duplicate-key-checker ...

  7. The 10 Most Important Security Controls Missing in JavaEE--reference

    JavaEE has some excellent built-in security mechanisms, but they don’t come close to covering all th ...

  8. WPF遇到无边框的问题

    今天做一个项目采用的是WPF开发并且在制作窗体的时候用到无边框的问题,由于WPF开发和winform开发用点不一样, 遇到了这个问题就帮这个遇到问题的解决方法写下来方便以后忘记了和给一些遇到的朋友做一 ...

  9. file is missing from source location:c\temp\batang.ttc

    打开注册表 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\FontLink\SystemLink 在右侧找到 Micr ...

  10. Java集合和PHP的对比

    这里突然感觉到在java中的集合,和php的数组非常相似 .