<!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. fedora 16 yum yuan

    暑假买了几本Linux的书一直放在书架上没看,周末闲着没事就拿起本<LinuxC从入门到精通>看了起来,初学Linux首先要做的便是在电脑上安装Linux系统.于是按书上的要求下载了Fed ...

  2. java基础强化——深入理解java注解(附简单ORM功能实现)

    目录 1.什么是注解 2. 注解的结构以及如何在运行时读取注解 2.1 注解的组成 2.2 注解的类层级结构 2.3 如何在运行时获得注解信息 3.几种元注解介绍 3.1 @Retention 3.2 ...

  3. 关于@property与@syntheszie的使用问题

    写在前面:在ARC大行其道的“现代化社会”,不少人不再对“完整的“OC”抱有它应该获得的尊重,于是浮躁成了代名词~~ 在使用ARC时,大家声明变量的过程中,往往使用@property来通过编译器,隐式 ...

  4. Redis清理

    Redis登录: Redis目录: redis-cli.exe -h 127.0.0.1 -p 6739 login:  auth “password”      flushall

  5. Python将阿拉伯数字转化为中文大写-乾颐堂

    利用Python将阿拉伯数字转化为中文大写,其实最麻烦的地方就是中间空多个0的问题,这种情况下,采用拆分法则,将一个大数字,先拆分成整数部分和小数部分,再对整数部分按照仟.万.亿.兆分位拆分为四个字符 ...

  6. CentOS7 下 安装 supervisor

    [注] linux环境必须安装 python 1.获取supervisor包:[https://pypi.python.org/pypi/supervisor] # wget https://pypi ...

  7. linux 安装php7

    http://blog.csdn.net/whatday/article/details/50645117 1: wget  http://cn2.php.NET/distributions/php- ...

  8. 两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)

    本篇文章主要介绍了"两款JSON类库Jackson与JSON-lib的性能对比(新增第三款测试)",主要涉及到两款JSON类库Jackson与JSON-lib的性能对比(新增第三款 ...

  9. C# 操作计算机用户权限

    我们可以用代码来获取当前登录用户的权限信息,    用户角色类型有以下几种: // 摘要:    //     指定与 System.Security.Principal.WindowsPrincip ...

  10. 编写高质量代码改善C#程序的157个建议——建议77： 正确停止线程

    建议77: 正确停止线程 开发者总尝试对自己的代码有更多的控制.例如,“让那个还在工作的线程马上停止下来”.然而,并非我们想怎样就可以怎样的,这至少涉及两个问题. 第一个问题 正如线程不能立即启动一样 ...