任意值变化（获取行内样式框架）

最新推荐文章于 2024-04-18 17:17:12 发布

Z19871124123456

最新推荐文章于 2024-04-18 17:17:12 发布

阅读量110

点赞数

原文链接：http://www.cnblogs.com/Mr-W/p/6406997.html

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>多物体运动2</title>
    <style>
        div {
            font-size: 14px;
            width: 100px;
            height: 50px;
            background: red;
            margin: 10px;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function() {
            var aDiv = document.getElementsByTagName('div');

            aDiv[0].onclick = function() {
                startMove(this, 'width', 300);
            }
            aDiv[1].onclick = function() {
                startMove(this, 'height', 300);
            }
            aDiv[2].onclick = function() {
                startMove(this, 'fontSize', 100);
            }
            aDiv[3].onclick = function() {
                startMove(this, 'borderWidth', 100);
            }
        }

        function getStyle(obj, attr) { //获取行内样式
            if (obj.currentStyle) {
                return obj.currentStyle[attr];
            } else {
                return getComputedStyle(obj, false)[attr];
            }
        }
        var timer = null;

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var iCur = parseInt(getStyle(obj, attr));
                var iSpeed = (iTarget - iCur) / 8;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if (iCur == iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }, 30)
        }
    </script>
</head>

<body>
    <div></div>
    <div></div>
    <div>sdfsf</div>
    <div></div>
</body>

</html>

查看范例

转载于:https://www.cnblogs.com/Mr-W/p/6406997.html

Z19871124123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
任意值变化（获取行内样式框架）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多物体运动2</title> <style> div { font-size: ...
复制链接

扫一扫