<!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. 前端开发之JavaScript基础篇二

    主要内容: 1.流程控制条件语句和switch语句 2.for循环和while循环 3.Break语句和Continue语句 4.数组和数组常用方法 5.函数 6.对象 一.流程控制条件语句和swit ...

  2. 蓝桥杯算法训练 java算法 表达式求值

    问题描述 输入一个只包含加减乖除和括号的合法表达式,求表达式的值.其中除表示整除. 输入格式 输入一行,包含一个表达式. 输出格式 输出这个表达式的值. 样例输入 1-2+3*(4-5) 样例输出 - ...

  3. 10 华电内部文档搜索系统 search02

    搜索项目并不是一个很大的项目,在实际项目中往往是作为子项目和别的项目集成在一起的.比如说和OA项目集成在一起,作为另外一个项目的子系统来使用.搜索项目的功能并不复杂. 整个项目是文档搜索项目,如题:企 ...

  4. 【POJ1222】EXTENDED LIGHTS OUT

    参考博客 https://blog.csdn.net/so_so_y/article/details/76098713 题意 有一些灯泡组成了5*6的方阵.每个开关(开关会使灯泡的状态发生变化)除了控 ...

  5. 35. Search Insert Position (Array; Divide-and-Conquer)

    Given a sorted array and a target value, return the index if the target is found. If not, return the ...

  6. Gson 是google解析Json的一个开源框架,同类的框架fastJson,JackJson

    Gson 是google解析Json的一个开源框架,同类的框架fastJson,JackJson等等 本人fastJson用了两年,也是从去年才开始接触Gson,希望下面的总结会对博友有用,至于Gso ...

  7. 对称二叉树 · symmetric binary tree

    ［抄题］: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...

  8. sqlserver 文件与文件组的使用和优化

    文件和文件组填充策略     文件组对组内的所有文件都使用按比例填充策略.当数据写入文件组时,SQL Server 数据库引擎按文件中的可用空间比例将数据写入文件组中的每个文件,而不是将所有数据都写入 ...

  9. python 类变量 在多线程下的共享与释放问题-乾颐堂

    最近被多线程给坑了下,没意识到类变量在多线程下是共享的,还有一个就是没意识到 内存释放问题,导致越累越大 1.python 类变量 在多线程情况 下的 是共享的 2.python 类变量 在多线程情况 ...

  10. DataTable数据分页

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Refle ...