js学习笔记（缓动动画的封装、 js获取css属性值、JS改变css单属性）

最新推荐文章于 2022-10-11 22:16:17 发布

甜甜今天学了吗

最新推荐文章于 2022-10-11 22:16:17 发布

阅读量241

点赞数

文章标签： js

本文链接：https://blog.csdn.net/dawanhjiao/article/details/106139773

版权

特效1：缓动动画的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画的封装</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>
<body>
<!--缓动：由快到慢-->
<button id="btn">往右走</button>
<button id="btn1">往左走</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
       var box = Tool.$('box');
       //向右走
       Tool.$('btn').addEventListener('click',function () {
           donghua(box,800,'left');
       }) ;
        //往左走
        Tool.$('btn1') .addEventListener('click',function () {
            donghua(box,200,'left');
        })
    });
    /**
     * 缓动动画
     * @param ele  要做动画的元素
     * @param target  动画移动的终点
     */
    function donghua(ele,target,test) {
        clearInterval(ele.ding);  //将定时器绑定到要做动画的元素上
        var step = 0;
        ele.ding = setInterval(function () {
            step = (target - ele.offsetLeft) * 0.2;
            step = (target > ele.offsetLeft) ? Math.ceil(step) : Math.floor(step);
            //当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
            ele.innerText = ele.offsetLeft;
            ele.style[test] = ele.offsetLeft + step + 'px';
        },20)
    }
</script>
</body>
</html>

js获取css属性值

1.问题
在js中box.style.top、box.style.left这种方式只能获取到css行内样式，但是css最常用的是页内样式或者外部样式
2.解决
在ie和Opera浏览器 obj.currentStyle
其他W3C标准浏览器window.getComputedStyle(元素,伪类)元素和伪类缺一不可，没有伪类用null替代
3.兼容写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js获取css属性值</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 5px solid #000;
        }
    </style>
</head>
<div id="box"></div>
<button id="btn">获取属性值</button>
<script src="工具/Tool.js"></script>
<script>
    var box = Tool.$('box');
    Tool.$('btn').addEventListener('click',function () {
        console.log(getstyle(box, 'width'));;
    }) ;

    /**
     * js获取css属性值
     * @param obj  要获取的元素
     * @param attr  要获取元素的属性
     */
    function getstyle(obj, attr) {
        if (obj.currentStyle){ //ie和Opera浏览器
            return obj.currentStyle[attr];
        }else{                      //其他W3C标准浏览器
            return window.getComputedStyle(obj,null)[attr];
        }
    }
</script>
</body>
</html>

特效2：JS改变css单属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS改变css单属性</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>
<body>
<button id="btn1">变宽</button>
<button id="btn2">变高</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var box = Tool.$('box');
        Tool.$('btn1').addEventListener('click',function () {
            donghua(box,'width',400);
        });
        Tool.$('btn2').addEventListener('click',function () {
            donghua(box,'height',400);
        })
    });
    /**
     * 缓动动画
     * @param ele    要做动画的元素
     * @param attr   元素的css属性
     * @param target    属性最终要改变的目标值
     */
    function donghua(ele,attr,target) {
        clearInterval(ele.ding);  //将定时器绑定到要做动画的元素上
        var step = 0,begin;

        ele.ding = setInterval(function () {
            begin = Tool.getstyle(ele,attr); //获取要做动画的属性,这样得到的是一个字符串
            begin = parseInt(begin);//将字符串转成数字
            console.log(begin);
            step = (target - begin) * 0.2;
            step = (target > begin) ? Math.ceil(step) : Math.floor(step);
            //当target > ele.offsetLeft往右走，所以要向上取整；往左走就要向下取整
            ele.innerText = begin;
            ele.style[attr]= begin + step + 'px';
        },20)
    }
</script>
</body>
</html>