函数封装使用

最新推荐文章于 2023-10-17 10:49:12 发布

m0_72630538

最新推荐文章于 2023-10-17 10:49:12 发布

阅读量73

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_72630538/article/details/126734286

版权

1.函数封装使用

先创建common.js文件

/* 
    *author:朱银娟
    *作用:获取非行间样式和行间样式
    *params   elem              标签   
    *params   attr    String    样式名
*/
function  getStyle(elem,attr){
   
    if(window.getComputedStyle){
    //标准浏览器
       return  window.getComputedStyle(elem)[attr];
    }else{
   //IE低版本浏览器
       return    elem.currentStyle[attr];
    }
}

在页面中使用

<script src="./common.js"></script>

<body>
    <div style="color: red;font-size: 20px;"></div>
    <script>
        console.log(getStyle)
        var oDiv = document.getElementsByTagName("div")[0]
        var a = getStyle(oDiv, "color");
        console.log(a);
        var b = getStyle(oDiv, "fontSize");
        console.log(b);
    </script>
</body>

2.小鸟起飞案例

js中如果涉及到元素移动建议大家使用定位

2.1开始起飞(从左往右飞)

实现步骤
- 点击按钮改变img的left值
- left值 = 在当前left值的基础上 + 10
- 开启定时器自动移动图片位置

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title