<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>window.getComputedStyle(div,null)</title>

    <style type="text/css">

        *{margin:0;padding:0}

    </style>

</head>

<body>

<div style="width: 100px; height: 100px; background: red; position: absolute;left: 0; top:0"></div>

<script type="text/javascript">

    //封装

    function getStyle(elem,prop){

        if(window.getComputedStyle){        //如果它存在的话(兼容谷歌)

            return window.getComputedStyle(elem,null)[prop];//prop作为参数字符串传进来，所有得中括号

        }else{

            return elem.currentStyle[prop];   //兼容IE

        }

    }

    var timer;

    var div = document.getElementsByTagName('div')[0]

    timer=setInterval(function(){

        div.style.left=parseInt(getStyle(div,'left'))+1+"px";//注意：getStyle(div,'left')打印出来是0px,所以用parseInt取整数

    },10)

    div.onclick = function() {

        clearInterval(timer)

    }

</script>

</body>

</html>

效果图：

js计算机样式window.getComputedStyle(ele,null)2的更多相关文章

  1. js计算机样式window.getComputedStyle(ele,null)与

    一.getComputedStyle兼容IE8以上,范户籍的计算样式的值都是绝对值,没有相对单位(如:width:10em; 它打印出来是160px) window.getComputedStyle( ...

  2. 关于obj.currentStyle.property、window.getComputedStyle(obj,null).property、obj.style.property的理解

    首先是obj,style.property 我一直用这个obj.style.property这个属性来修改内联和外联的obj属性,但是从网上看到了obj.style.property居然只能读取内嵌的 ...

  3. 兼容获取元素当前样式 currentStyle || getComputedStyle

    function getStyle(ele, attr) { return ele.currentStyle ? ele.currentStyle[attr] : window.getComputed ...

  4. 原生js获取样式

    js中的获取样式是在是让人头疼,为了方便兼容多个浏览器,把设置样式封装成一个函数. 函数如下: function getStyle(element, property) { var value = e ...

  5. window,getComputedStyle，letter-spacing

       js 拿到element的css样式    window.getComputedStyle(ele,[pseuso)    比如想拿到一个element的背景色 window.getComput ...

  6. window.getComputedStyle()方法的使用及其扩展

    1.window.getComputedStyle()方法返回值 是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式声明对象([object CSSStyleDeclaratio ...

  7. JS获取样式

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

  8. JS 操作样式 style

    1. 任何支持 style 特性的 HTML 元素在 JavaScript 中都对应着有一个 style 属性,指向一个 CSSStyleDeclaration 的一个实例对象,包含该元素的内嵌sty ...

  9. 总结js(Iframe、window.open、window.showModalDialog)父窗口与子窗口之间的操作

    http://hi.baidu.com/yashua839/blog/item/131fdb2fe547ef221f3089af.html一.Iframe 篇 //&&&&am ...

随机推荐

  1. Transform & Physics

    [Transform & Physics] 1.Space.Unity定义了Space枚举值,此值如下: 通常通过Space.World.Space.Self来区别一个Vector是按世界坐标 ...

  2. Excel VBA入门（六）过程和函数

    前面讲过,VBA代码有两种组织形式,一种就是过程(前面的示例中都在使用),另一种就是函数.其实过程和函数有很多相同之处,除了使用的关键字不同之外,还有不同的是: 函数有返回值,过程没有 函数可以在Ex ...

  3. Python基础：字符串的常见操作

    # 切片 # 切片 获取对象中一部分数据 [起始位置:结束位置(不包含):步长] qpstr = "山东张学友" result = qpstr[1: 3: 1] # 东张 prin ...

  4. UNITY把3D模型显示在UI层级上的思路

    一般UI是处理于显示最高层级的, 因此这里的做法是 使用镜子效果,做镜子可使用renderTexture 然后启用一个摄像机对renderTexture进行数据填充, 然后在ui上使用Raw Imag ...

  5. No member named 'setResizeMode' in 'QHeaderView' - Convert Qt 4.7 to Qt 5.8

    https://stackoverflow.com/questions/42743141/no-member-named-setresizemode-in-qheaderview-convert-qt ...

  6. rest-framework-----url控制

    一:自定义路由(原始方式) from django.conf.urls import url from app01 import views urlpatterns = [ url(r'^books/ ...

  7. Excel2016通过宏生成拼音码

    一:视图---->宏---->录制宏 二:试图---->宏---->查看宏 三:点击编辑,输入如下代码片段,点击保存,并选择是 Function pinyin(p As Str ...

  8. HDU 6125 Free from square (状压DP+背包)

    题意:问你从 1 - n 至多选 m 个数使得他们的乘积不能整除完全平方数. 析:首先不能整除完全平方数,那么选的数肯定不能是完全平方数,然后选择的数也不能相同的质因子. 对于1-500有的质因子至多 ...

  9. CodeForces 690D1 The Wall (easy) (判断连通块的数量)

    题意:给定一个图,问你有几个连通块. 析:不用说了,最简单的DFS. 代码如下: #include <bits/stdc++.h> using namespace std; const i ...

  10. spring 整合 mybatis （不含物理分页）

    http://www.mybatis.org/spring/mappers.html http://www.mybatis.org/spring/zh/mappers.html <?xml ve ...