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

Posted 前端HL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js计算机样式window.getComputedStyle(ele,null)2相关的知识,希望对你有一定的参考价值。

<!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的主要内容,如果未能解决你的问题,请参考以下文章

1113Js操作CSS样式

11-13 js操作css样式

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

js事件,操作页面文档,计算后样式,数据类型

JS基础知识——获取未设置行内元素的样式,定时器

js获取非行间样式