获取元素样式 currentStyle 和 getcomputedStyle

场景

 你要获取某一元素的样式，可是没有获取到，返回的值为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)

  • eyoucms 导航调用三级栏目的方法 西祠_fa33
    {eyou:channeltype="top"row="60"id="field"currentstyle="active"}{$field.typename}{eyou:channelname="$field.children"row="100"id="field2"}{$field2.typename}{eyou:channelname="$field2.children"row="100"i
  • haslayout解释和触发 星辰_50e6
    haslayout详解定义haslayout是IE7-浏览器的特有属性。hasLayout是一种只读属性，有两种状态：true或false。当其为true时，代表该元素有自己的布局，否则代表该元素的布局继承于父元素。[注意]通过element.currentStyle.hasLayout可以得出当前元素的hasLayout情况HTML标签默认触发hasLayout的有如下HTML标签：【1】htm
  • eyoucms adv 广告列表标签 西祠_fa33
    【基础用法】名称：adv功能：获取广告列表内容。语法：{eyou:advpid='1'row='3'}{/eyou:adv}参数：pid=''广告位置IDrow='10'返回广告列表总数currentstyle=''应用样式class类名orderby='now'文档排序方式orderby='hot'或orderby='click'表示按点击数从高到低排序orderby='now'按发布时间最新排
  • eyoucms 当前栏目如何调用子栏目？ 西祠_fa33
    易优cms在当前栏目下如何调用子栏目呢？下面代码即可实现。调用下级栏目{eyou:channeltype="son"currentstyle="active"}{$field.typename}{/eyou:channel}type="son"son表示下级转自：https://www.eyoucms.com/help/eyoujq/1277.html
  • 28、JavaScript学习笔记——脚本化CSS lvh98 cssjavascript学习
    脚本化CSS文章目录脚本化CSS1.读写元素CSS属性1.1dom.style.prop2.读CSS计算属性2.1window.getComputedStyle(eleDom,伪元素字符串/null)2.2currentStyle2.3封装获取计算属性的函数，解决兼容性问题1.读写元素CSS属性1.1dom.style.prop可读写行间样式，没有兼容性问题。dom.style返回一个CSSSty
  • js 获取元素宽高的几种方法 @小倪同学 javascript前端开发语言
    1、Element.style.width/height只能获取内联样式2、window.getComputedStyle(ele).width/height可获取实时的style3、Element.currentStyle.width/height功能与第二点相同，只存在于旧版本IE中(IE9以下)，除了做旧版IE兼容，就不要用它了。4、Element.getBoundingClientRect
  • 织梦dede:channel指定typeid子栏目调用currentstyle高亮无效的解决教程 阿修哥
    dede:channel指定typeid时currentstyle无效{dede:channeltypeid='12'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}解决方法打开include/taglib/channel.lib.php找到$row['id']==$typeid改成$row['id']==$r
  • 【易优CMS】screening的基础用法 Jessicahuan
    [基础用法]名称：screening功能：筛选文章语法：{eyou:screeningid='field'currentstyle='active'alltxt='不限'}{eyou:volistname='$field.list'id='vo'}{$vo.title}：{eyou:volistname='$vo.dfvalue'id='val'}{$val.name}{/eyou:volist}
  • 获取DIv样式的时候，处理浏览器不同的兼容性问题 MCherish
    functiongetStyle(obj,attr){returnobj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];}
  • 获取css样式 三人_
    functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returngetComputedStyle(obj,false)[attr];}}通过这种方式获取css3的transform,结果是一个矩阵
  • js事件中的一些兼容写法总结 秃头成就技术
    事件中兼容还是挺多的，这里稍微总结下，大家还得多看多背才能熟记1.获取行内样式兼容functiongetStyle(ele,attr){if(window.getComputedStyle){//通常方法获取returnwindow.getComputedStyle(ele,false)[attr];}else{//ie兼容returnele.currentStyle[attr];}}2.键盘事件
  • js封装一个缓动动画 璃小灯吖
    js封装一个缓动动画，支持传入json数据格式进行多属性操作。具体全部实现代码如下：1、获取元素css样式属性值的方法/****@对象名称{String}obj*@CSS属性{String}attr*/functiongetStyleAttr(obj,attr){if(obj.currentStyle){//IE和operareturnobj.currentStyle[attr];}else{re
  • vue面试题总结记录(1) 萬wan事顺意
    为了未来几周的面试，忙忙碌碌的总结了这么一些面试题。1.js的兼容问题aevent事件问题：varoEvent=ev||window.event;ev是谷歌火狐的写法，IE9以上支持，往下不支持；event谷歌和IE支持，火狐不支持；b.获取元素的非行间样式：functiongetStyle(object,ocss){if(object.currentstyle){returnobj.curren
  • Mkdocs中利用Js实现大小圈鼠标拖动样式 Wcowin javascript前端
    在docs/javascripts/extra.js下复制粘贴：varCURSOR;Math.lerp=(a,b,n)=>(1-n)*a+n*b;constgetStyle=(el,attr)=>{try{returnwindow.getComputedStyle?window.getComputedStyle(el)[attr]:el.currentStyle[attr];}catch(e){}
  • 取非行间样式 想做一个画家
    Document#div1{width:200px;height:200px;background:red;}//取非行间样式：如果样式没有写在行间，//那么应该利用currentStyle(IE)或者getComputedStyle(obj，false).name。//获取复合样式的属性时需要注明所取的明确样式//如获取背景颜色，需要写backgroundColor，直接写background是
  • 二级导航嵌套调用并高亮 黎明的破晓
    织梦一级菜单被点击栏目高亮调用方法：{dede:channeltypeid='1'type='son'currentstyle="~typename~"}[field:typename/]{/dede:channel}*注：对当前栏目列表设置了class='on'，可以通过css样式为其设置背景图片或颜色，从而达到栏目高亮的效果。首页判断是否添加class调用方法：网站首页的位置把class的属性
  • js中兼容性问题 三千繁夢
    JS中出现的兼容性问题的总结1.关于获取行外样式currentStyle和getComputedStyle出现的兼容性问题我们都知道js通过style不可以获取行外样式，当我们需要获取行外样式时:我们一般通过这两个方法获取行外样式：IE下:currentStyleChrome,FF下:getComputedStyle(oDiv,false)兼容两个浏览器的写法:if(oDiv.currentSty
  • getStyleFunction Jadon7
    getStyleFunctionfunctiongetStyle(obj,name){if(obj.currentStyle){returnobj.currentStyle[name];}else{returngetComputedStyle(obj,false)[name];}}window.onload=function(){varoDiv=document.getElementById('d
  • channelartlist标签完美支持currentstyle属性 阿修哥
    channelartlist标签完美支持currentstyle属性,实现自动加载当前栏目CSS样式，可以用来标识当前栏目位置的CSS，解决方法如下：打开文件include\taglib\channelartlist.lib.php找到：$pv->Fields['typeurl']=GetOneTypeUrlA($typeids[$i]);在此行代码下方增加以下代码：if($typeids[$i]
  • 脚本化css的知识点及方法封装 QJe
    脚本化CSS查询计算样式window.getComputedStyle(ele,null)计算样式只读返回的样式的值为绝对值（px），不是相对值（em，%）IE8及IE8以下不兼容此时的null如果传递值，可传递伪元素，意思为获取该ele的伪元素的样式ele.currentStyle计算样式只读返回的样式值不是经过转换的绝对值IE特有的属性//针对上述两种查询样式方法封装兼容的fun/***[ge
  • js中常见的兼容问题及其解决方法 林llgb
    在编写js的代码时，总会遇到一些兼容问题，下面来总结一些常见的兼容写法：1.获取样式的兼容写法：A.非IE浏览器：getComputedStyle(元素,false).属性名B.IE浏览器：元素.currenStyle.属性名C.兼容的封装写法：正常浏览器和IE8及以下functiongetStyle(element,attribute){if(element.currentStyle){retu
  • JS如何设置盒模型的宽和高 成熟稳重的李先生
    //只能获取内联样式设置的宽高dom.style.width/height//获取渲染后即时运行的宽高，值是准确的。但只支持IEdom.currentStyle.width/height//获取渲染后即时运行的宽高，值是准确的。兼容性更好window.getComputedStyle(dom).width/height;//获取渲染后即时运行的宽高，值是准确的。兼容性也很好，一般用来获取元素的绝对
  • 放烟花效果 升龙无涯
    烟花效果图如下：烟花效果代码如下：工具函数//获取随机颜色的函数functiongetColor(){varcolor='#';for(vari=0;i0?Math.ceil(percent):Math.floor(percent);//让当前的值跟计算好的距离相加currentStyle+=percent;//设置样式ele.style[attr]=currentStyle+'px'//如果移动
  • 来讲一下IE和火狐的不同之处 赋帘楠霓
    （1）获取样式：IE支持currentStyle，Firefox支持getComputedStyle（2）文本：IE用innerText，Firefox用textContent（3）事件：IE用attachEvent，Firefox用addEventListener（4）透明度：IE用filter：alpha（opacity=80），Firefox用opacity：0.8（5）鼠标位置：IE用ev
  • js 运动函数封装函数，涉及 是否匀速、目标值、json参数等 Ares-Wang javascript开发语言ecmascript
    VID_20220713_163005Document#div{height:50px;width:80px;background-color:red;}//获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[attr];}else{returnwindow.getComputedStyle(obj,
  • js实现导航栏上下动画效果
    本文实例为大家分享了js实现导航栏上下动画的具体代码，供大家参考，具体内容如下obj.currentStyle[name]与getComputedStyle(obj,false)[name]，一个是支持IE一个支持FE完美运动js插件，能根据传进来的值，进行匹配，从而得到了理想的运动效果，也就是运行逻辑。实现上下动画动画效果就是控制元素height的值，通过不断的修改该值，就能呈现所谓的动画效果，
  • JavaScript style对象与CurrentStyle对象案例详解
    1、Style对象style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。例子：#div{color:gray;}//内部样式//内联样式document.getElementById('id').style.color;//值为red2、currentStyle对象返回所有样式声明（包括内部、外部、内联）按
  • css盒模型 大乔是个美少女
    image.pngw3c的盒模型：宽高只针对content宽高。IE的盒模型：宽高针对的是content+padding+border的宽高。box-sizing:content-boxw3c模型box-sizing:border-boxIE模型js获取：getElementById("aaa").style.width/height【内联】dom.currentStyle.width/heigh
  • 常用函数库 jia林
    //获取样式functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle([attr])}else{returngetComputedStyle(obj,false)[attr]}}//事件绑定functionaddEvent(obj,sEv,fn){if(obj.addEventListener){//兼容ie9+F
  • 3-2 CSS盒模型 zhangmz
    1、标准模型2、IE模型3、CSS如何设置这两个模型box-sizing:content-box;//浏览器默认box-sizing:border-box4、JS如何获取盒模型对应的宽和高dom.style.width/height//只能取到内联样式dom.currentStyle.width/height//只有IE支持window.getComputedStyle(dom).width/he
  • java Illegal overloaded getter method with ambiguous type for propert的解决 zwllxs javajdk
    好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出 Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，
  • IT人应当知道的10个行业小内幕 beijingjava 工作互联网
    10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。 　　尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。 　　然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配
  • java 实现自定义链表 CrazyMizzz java数据结构
    1.链表结构   链表是链式的结构 2.链表的组成    链表是由头节点，中间节点和尾节点组成    节点是由两个部分组成：       1.数据域       2.引用域 3.链表的实现 &nbs
  • web项目发布到服务器后图片过一会儿消失 麦田的设计者 struts2上传图片永久保存
      作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片
  • CodeIgniter框架Cart类 name 不能设置中文的解决方法 IT独行者 CodeIgniterCart框架　
    今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下： $data = array( 'id' => 'sku_123ABC', 'qty' => 1, '
  • linux回收站 _wy_ linux回收站
    今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。     后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在
  • jquery回到页面顶端 知了ing htmljquerycss
    html代码： <h1 id="anchor">页面标题</h1> <div id="container">页面内容</div> <p><a href="#anchor" class="topLink">回到顶端</a><
  • B树、B-树、B+树、B*树 矮蛋蛋 B树
    原文地址： http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html B树        即二叉搜索树：        1.所有非叶子结点至多拥有两个儿子（Left和Right）； &nb
  • 数据库连接池 alafqq 数据库连接池
    http://www.cnblogs.com/xdp-gacl/p/4002804.html @Anthor:孤傲苍狼 数据库连接池 用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误： java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec
  • java泛型 百合不是茶 java泛型
    泛型 在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患   泛型的特点：消除强制转换 确保类型安全 向后兼容   简单泛型的定义：      泛型：就是在类中将其模糊化，在创建对象的时候再具体定义 class fan
  • javascript闭包[两个小测试例子] bijian1013 JavaScriptJavaScript
    一.程序一 <script> var name = "The Window"; var Object_a = { 　　name : "My Object", 　　getNameFunc : function(){ var that = this; 　　　　return function(){ 　　　　
  • 探索JUnit4扩展：假设机制（Assumption） bijian1013 javaAssumptionJUnit单元测试
    一.假设机制（Assumption）概述        理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，
  • 【Gson四】范型POJO的反序列化 bit1129 POJO
    在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过 String str = new Gson().toJson(data); 得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO   import com.google.gson.Gson; import java.
  • 【Spark八十五】Spark Streaming分析结果落地到MySQL bit1129 Stream
    几点总结： 1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法 2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，
  • NGINX + LUA实现复杂的控制 ronin47 nginx lua
    安装lua_nginx_module 模块 lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty Centos和debian的安装就简单了。。 这里说下freebsd的安装： fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz tar zxvf lua-5.1.4.tar.gz cd lua-5.1.4 ma
  • java-递归判断数组是否升序 bylijinnan java
    public class IsAccendListRecursive { /*递归判断数组是否升序 * if a Integer array is ascending,return true * use recursion */ public static void main(String[] args){ IsAccendListRecursiv
  • Netty源码学习-DefaultChannelPipeline2 bylijinnan javanetty
    Netty3的API http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html 里面提到ChannelPipeline的一个“pitfall”： 如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB） 来
  • Java工具之JPS chinrui java
    JPS使用     熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来
  • window.print分页打印 ctrain window
    function init() { var tt = document.getElementById("tt"); var childNodes = tt.childNodes[0].childNodes; var level = 0; for (var i = 0; i < childNodes.length; i++) {
  • 安装hadoop时 执行jps命令Error occurred during initialization of VM daizj jdkhadoopjps
    在安装hadoop时，执行JPS出现下面错误   [slave16][email protected]:/tmp/hsperfdata_hdfs# jps Error occurred during initialization of VM java.lang.Error: Properties init: Could not determine current working
  • PHP开发大型项目的一点经验 dcj3sjt126com PHP重构
    一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十
  • android笔记之--向网络发送GET/POST请求参数 dcj3sjt126com android
    使用GET方法发送请求 private static boolean sendGETRequest (String path, Map<String, String> params) throws Exception{ //发送地http://192.168.100.91:8080/videoServi
  • linux复习笔记 之bash shell (3) 通配符 eksliang linux 通配符linux通配符
    转载请出自出处： http://eksliang.iteye.com/blog/2104387 在bash的操作环境中有一个非常有用的功能，那就是通配符。 下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c
  • Android关于短信加密 gqdy365 android
    关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：     1、因为Android有短信收发接口，可以调用接口完成短信收发；         发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm
  • asp.net在网站根目录下创建文件夹 hvt .netC#hovertreeasp.netWeb Forms
    假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下： string m_keleyiFolderName = Server.MapPath("/hovertree"); if (Directory.Exists(m_keleyiFolderName)) { //文件夹已经存在 return; } else { try { D
  • 一个合格的程序员应该读过哪些书 justjavac 程序员书籍
    编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？ “如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。” 很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数
  • 单实例实践 跑龙套_az 单例
       1、内部类 public class Singleton { private static class SingletonHolder { public static Singleton singleton = new Singleton(); } public Singleton getRes
  • PO VO BEAN 理解 q137681467 VODTOpo
    PO：      全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。     BO：     全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对
  • 战胜惰性，暗自努力 金笛子 努力
    偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？ 我有个朋友是搞技术的，平时嘻嘻哈哈，以
  • NDK/JNI二维数组多维数组传递 wenzongliang 二维数组jniNDK
    多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。 Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata) { jint i,j; int s
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他