JS获取元素任意属性值

兼容代码：

//获取元素的任意属性值
//ele是要获取的元素，attr为要获取的属性
function getStyle(ele,attr){
    return window.getComputedStyle?window.getComputedStyle(ele,null)[attr]:getCurrentStyle[attr];
}

利用这个js的案例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #dv {
            width: 200px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 20px;
        }
    </style>
</head>
<body>
<input type="button" value="变宽400px" id="btn1" />
<input type="button" value="向下移动800px" id="btn2" />

<div id="dv"></div>
<script src="js/common.js"></script>
<script src="js/getStyle.js"></script>
<script>

    my$('btn1').onclick=function(){
        move(my$('dv'),'width',400,10);
    };
    my$('btn2').onclick=function(){
        console.log(getStyle(this,'height'));
        console.log(getStyle(my$('dv'),'top'));
        move(my$('dv'),'top',800,10);
    };


    function move(ele,attr,aim,step){
        //每次点击执行函数的时候都清除定时器，防止连续点击加快移动速度
        //之所以用ele.time是为了不出time  undefined的错误
        clearInterval(ele.time);

        ele.time=setInterval(function() {
            //获取当前属性值，是带单位的，parseInt()获得纯数字
            var now =parseInt(getStyle(ele,attr));

            //确定每次移动的单位距离step的正负，如果目标距离aim大于当前距离，step为正，反之step为负
            //每次执行函数之前将step初始化为正值
            step = Math.abs(step);
            step = now < aim ? step : -step;

            //设置每次执行函数当前得位置都在变化，变化量为step
            now += step;

            //设置元素的位置，如果正在向目标位置移动，那么Math.abs(now-aim)>Math.abs(step),如果已经在目标位置的地方
            //但是不能精确则Math.abs(now-aim)<Math.abs(step),这两种情况的当前位置是不一样的
            if (Math.abs(now - aim) > Math.abs(step)) {
                ele.style[attr] = now+'px';
            } else if (Math.abs(now - aim) < Math.abs(step)) {
                clearInterval(time);
                ele.style[attr] = aim+'px';
            }
            else if(Math.abs(now - aim) === Math.abs(step)){
                ele.style[attr] = aim+'px';
            }
        },20);


    }
</script>
</body>
</html>

通过传入不同的attr，对div进行不同的改变。

JS获取元素任意属性值

猜你喜欢