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

2021-02-09 06:16

阅读:615

标签:color   utf-8   padding   alt   htm   技术分享   text   pre   括号   

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

标签:color   utf-8   padding   alt   htm   技术分享   text   pre   括号   

原文地址:https://www.cnblogs.com/huanghuali/p/8571474.html


评论


亲,登录后才可以留言!