獲取非行間樣式函數及多物體動畫（原生js寫法）

時間 2019-11-19

原文原文鏈接

//非行間樣式函數css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            text-align: center;
        }
    </style>
</head>
<body>
<input type="button" value="style" id="btn"/>
<div id="div1">你好</div>
<!--//獲取非行間css樣式的函數-->
<script>
    function getStyle(obj, attr) {//獲取非行間樣式，obj是對象，attr是值
        if (obj.currentStyle) {//針對ie獲取非行間樣式
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];//針對非ie
        }
    }

    //爲對象寫入/獲取css樣式
    function css(obj, attr, value) {//對象，樣式，值，傳兩個參數的時候爲獲取樣式，3個是設置樣式
        if (arguments.length == 2) {
            return getStyle(obj, attr)
        } else {
            if (arguments.length == 3) {
                obj.style[attr] = value;
            }
        }

    }
    window.onload = function () {
        var oDiv = document.getElementById('div1');
        var oBtn = document.getElementById('btn');
        oBtn.onclick = function () {
            alert(getStyle(oDiv, 'height'));
            css(oDiv, 'background', 'green');
            alert(css(oDiv, "width"));
        }
    }
</script>
</body>
</html>

//多物體動畫（含透明度的動畫）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多物體複雜運動帶透明度</title>
    <style>
       *{
           margin:0;
           padding:0;
           font-size:12px;
       }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

        fieldset, img {
            border: 0
        }

        address, caption, cite, code, dfn, em, strong, th, var {
            font-style: normal;
            font-weight: normal
        }

        ol, ul {
            list-style: none
        }

        caption, th, td {
            text-align: center
        }

        h1, h2, h3, h4, h5, h6 {
            font-size: 100%;
            font-weight: normal
        }

        q:before, q:after {
            content: ''
        }

        abbr, acronym {
            border: 0
        }

        .odiv {
            position: relative;
        }

        .odiv ul li {
            width: 200px;
            height: 100px;
            background: yellow;
            margin-bottom: 20px;
            border: 2px solid #000;
        }

        #li1 {
            opacity: 0.3;
            filter: alpha(opacity:30);
        }
    </style>
</head>
<body>
<div id="odiv" class="odiv">
    <ul>
        <li id="li1"></li>
        <li id="li2"></li>
        <li id="li3"></li>
    </ul>
</div>
<script>
    window.onload= function () {
        var li1=document.getElementById('li1');
        var li2=document.getElementById('li2');
        var li3=document.getElementById('li3');
        li1.onmouseover= function () {
            startMov(this,100,'opacity');
        };
        li1.onmouseout= function () {
            startMov(this,30,'opacity')
        };
        li2.onmouseover=function(){
            startMov(this,200,'height')
        };
        li2.onmouseout= function () {
            startMov(this,100,'height')
        };
        li3.onmouseover= function () {
            startMov(this,400,'width')
        };
        li3.onmouseout= function () {
            startMov(this,200,'width')
        };
         //給當前的三個對象分別添加定時器timer
        li1.timer=null;
        li2.timer=null;
        li3.timer=null;
    };
    //移入移出所觸發的動畫函數
    function startMov(obj,itarget,attr){
        clearInterval(obj.timer);//執行前先清空當前的定時器
        //再給當前對象添加定時器
        obj.timer=setInterval(function () {
            var icur=0;
            if(attr=='opacity'){
                icur=Math.round(parseFloat(getStyle(obj,attr))*100);//計算機在計算小數的時候每每是不許確的
            }else{
                icur=parseInt(getStyle(obj,attr));
            }
            var speed=0;
            speed=(itarget-icur)/8;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            if(icur==itarget){
                clearInterval(obj.timer);
            }else{
                if(attr=='opacity'){
                    obj.style.filter='alpha(opacity:'+(icur+speed)+')';
                    obj.style.opacity=(icur+speed)/100;
                }else {
                    obj.style[attr]=icur+speed+'px';
                }
            }
        },30);
    }
    //獲取非行間樣式
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else {
            return getComputedStyle(obj,false)[attr];
        }
    }
</script>
</body>
</html>