<!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. laravel phpstorm IDE 代码提示

    第一步:在项目的composer.json中添加如下一行 "require": { "laravel/framework": "5.0.*" ...

  2. 10 华电内部文档搜索系统 search05

    上一节讲述了索引更新的处理方案,这一节首先讲述索引维护的相关方案.每创建一个索引,把文档相关的信息插入到数据库中.这个时候会产生一个唯一的对应的ID,获取这个ID之后,把这个ID又插入到对应的索引文件 ...

  3. 第五章 大数据平台与技术 第12讲 大数据处理平台Spark

    Spark支持多种的编程语言 对比scala和Java编程上节课的计数程序.相比之下,scala简洁明了. Hadoop的IO开销大导致了延迟高,也就是说任务和任务之间涉及到I/O操作.前一个任务完成 ...

  4. 【LA2957 训练指南】运送超级计算机【二分，最大流】

    题意: 宇宙中有n个星球,你的任务是用最短的时间把k个超级计算机从星球S运送到星球T.每个超级计算机需要一整艘飞船来运输.行星之间有m条双向隧道,每条隧道需要一整天的时间来通过,且不能有两艘飞船同时使 ...

  5. 145. Binary Tree Postorder Traversal (Stack, Tree)

    Given a binary tree, return the postorder traversal of its nodes' values. For example: Given binary ...

  6. Opencv3 Robert算子 Sobel算子 拉普拉斯算子 自定义卷积核——实现渐进模糊

    #include <iostream>#include <opencv2/opencv.hpp> using namespace std;using namespace cv; ...

  7. SqlServer 分区视图实现水平分表

    我们都知道在数据库数据量较多的时候,可数据进行水平扩展,如分库,分区,分表(也叫分区)等.对于分表的一个方案,就是使用分区视图实现. 分区视图允许将大型表中的数据拆分成较小的成员表.根据其中一列中的数 ...

  8. 魔法变量*args 和 **kwargs

    其实并不是必须写成*args 和**kwargs. 只有变量前面的 *(星号)才是必须的. 你也可以写成*var 和**vars. 而写成*args 和**kwargs只是一个通俗的命名约定. *ar ...

  9. OpenCV学习记录（二）：自己训练haar特征的adaboost分类器进行人脸识别 标签： 脸部识别opencv 2017-07-03 21:38 26人阅读

    上一篇文章中介绍了如何使用OpenCV自带的haar分类器进行人脸识别(点我打开). 这次我试着自己去训练一个haar分类器,前后花了两天,最后总算是训练完了.不过效果并不是特别理想,由于我是在自己的 ...

  10. 点云数据保存为pcd文件_pcd_write.cpp

    #include <iostream>#include <pcl/io/pcd_io.h>#include <pcl/point_types.h> int main ...