有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

js 常用的函数封装方法

javascript cat 11个月前 (11-19) 30次浏览 已收录 0个评论 扫描二维码

1、函数封装

函数的封装是把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口

1、获取元素样式

<div id="box" style="width: 200px;"></div>

<script>
    // 需求:通过js的方式,获取元素的样式

    var box = document.getElementById('box');
    // console.log(box);

    // ---------------------------------------------
    // 方式一:
    // 元素.style.样式名    不足:只能获取行间的样式
    console.log(box.style.width);

    // ---------------------------------------------
    // 方式二:Computed计算机    
    // 获取计算以后的样式,返回的是一个对象
    // 语法:window.getComputedStyle(元素)
    // IE8及以下不支持

    console.log(window.getComputedStyle(box)); // 返回的是一个对象 {}
    console.log(window.getComputedStyle(box).width); // 即然是一个对象,就可以通过点的方式获取属性
    console.log(window.getComputedStyle(box)['height']); // 通过中括号的方式获取
    console.log(window.getComputedStyle(box).backgroundColor);

    // -------------------------------------------------
    // 方式三:current当前的
    // 返回元素当前的样式,返回的是一个对象
    // 语法:元素.currentStyle
    // IE8及以下支持
    console.log(box.currentStyle); // 返回的是一个对象
    console.log(box.currentStyle.width);
    console.log(box.currentStyle['height']);
    console.log(box.currentStyle['background-color']);
</script>

2、浏览器能力判断

// 兼容的原理
// 浏览器能力判断,如果浏览器支持getComputedStyle就用它,否则就用currentStyle
console.log(window.getComputedStyle); // 在标准浏览器里,返回函数,在IE8及以下返回undefined

// --------------------------------

// 实现过程
if (window.getComputedStyle) {
    // IE9及以上
    console.log(window.getComputedStyle(box).width);
} else {
    // IE8及以下
    console.log(box.currentStyle.width);
}

3、封装

1、声明函数,把主要代码放入函数中

2、找函数中可变量做参数,代入函数中

3、调用,调试

// 函数封装
// 参数:元素 样式名
function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        // IE9及以上
        return window.getComputedStyle(ele)[attr];
    } else {
        // IE8及以下
        return ele.currentStyle[attr];
    }
}

console.log(getStyle(box, 'width'));
console.log(getStyle(box, 'height'));
console.log(getStyle(box, 'backgroundColor'));
喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址