<!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. elasticsearch中的mapping简介

    默认mapping elasticsearch(以下简称ES)是没有模式(schema)的,当我们执行以下命令: curl -d '{"name":"zach" ...

  2. 正则表达式在java程序中的使用

    package com.boco; import java.util.ArrayList;import java.util.List;import java.util.regex.Matcher;im ...

  3. 34. Search for a Range (Array; Divide-and-Conquer)

    Given a sorted array of integers, find the starting and ending position of a given target value. You ...

  4. Anaconda3 ubuntu18.04

    luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/MyFile/Anaconda3$ luo@luo-All-Series:~/M ...

  5. HBase表的memstore与集群memstore

    一直有一个问题,今天调查了一下源码算是明白了. ===问题=== 通过java api(如下代码所示)在创建表的时候,可以通过setMemStoreFlushSize函数来指定memstore的大小, ...

  6. 【解决】SOUI向导生成项目（VC2013以上版本编译时）无法运行XP解决

    对于SOUI向导生成的项目,无法在XP运行(提示 不是有效的WIN32程序 ) 即便设置为: 也无效,使用eXeScope打开发现最低系统要求是6.0,也就是说最少要WINXP以上,例如WIN7才能运 ...

  7. 我是如何在SQLServer中处理每天四亿三千万记录的(转)

    出处:http://www.cnblogs.com/marvin/p/HowCanIHandleBigDataBySQLServer.html 首先声明,我只是个程序员,不是专业的DBA,以下这篇文章 ...

  8. mysql表名忽略大小写配置

    linux下mysql默认是要区分表名大小写的.mysql是否区分大小写设置是由参数lower_case_table_names决定的,其中:1)lower_case_table_names = 0  ...

  9. iBeacon的第一篇（基于Swift实现）

    低功耗蓝牙技术现在几乎是只能手机的标配.随着这一技术的发展,苹果在2013年WWDC大会上,苹果推出iBeacon技术.该技术允许开发人员开发能够使用iBeacon硬件传感器的iOS应用程序,来为相应 ...

  10. Unity热更新技术整理

    一.热更新学习介绍 1.什么是热更新 举例来说: 游戏上线后,玩家下载第一个版本(70M左右或者更大),在运营的过程中,如果需要更换UI显示,或者修改游戏的逻辑,这个时候,如果不使用热更新,就需要重新 ...