JavaScript课程——Day05（函数封装、获取元素样式、浏览器能力判断、this、自定义属性）

1、函数封装

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

 

　　1.1、获取元素样式

　　　　1.1.1、标准浏览器

getComputedStyle(元素) 
返回的是一个对象，IE8及以下不支持

// Computed 计算
// window.getComputedStyle(元素)   返回这个元素所有的样式，是一个对象
// IE8及以下不支持
var s = getComputedStyle(box); // {}
console.log(typeof s); // 'object'

console.log(s.width);
console.log(s.height);
console.log(s.backgroundColor);

 

　　　　1.1.2、IE浏览器支持

元素.currentStyle
返回的是一个对象

// current 当前
// 元素.currentStyle   返回这个元素所有的样式，是一个对象
var s = box.currentStyle;
console.log(s);
console.log(typeof s); // 'object'

console.log(s.width);
console.log(s.height);
console.log(s.backgroundColor);

 

　　1.2、浏览器能力判断

// 浏览器能力判断
console.log(window.getComputedStyle); // 在IE9及以上，返回一个函数，在IE8及以下，返回undefined

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

 

　　1.3、封装

• 声明函数，把主要代码放入函数中
• 找函数中可变量做参数，带入函数中
• 调用，调试

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

console.log(getStyle(box, 'width'));
console.log(getStyle(box, 'height'));
console.log(getStyle(box, 'backgroundColor'));

 

2、this

• 谁调用了函数，this就指向谁
• this不是在定义的时候确定的，而是在调用函数的时候确定的

this种类：

普通函数中的this

事件函数中的this

对象方法中的this

function fn() {
    console.log(this);
}

// 1、普通函数调用的this
fn(); // window调用了函数

// 2、事件函数中的this
box.onclick = fn; // box调用了函数

// 1和2综合
// box.onclick = function () { // box
//     fn(); // window
// }

// --------------------------------
// 3、对象的方法中的this
var obj = {
    name: 'zs',
    fn: function () {
        console.log(this);
    }
}

obj.fn(); // fn这个函数中的this为obj这个对象

var v = obj.fn;
v(); // window

 

this面试题

var name = '李四';
var obj = {
    name: '张三',
    fn: function () {
        console.log(this.name);
    }
}

obj.fn(); // 张三

var v = obj.fn;
v(); // 李四

 

3、自定义属性

<!-- id class title 原生自带的属性 -->
<!-- msg 自定义的属笥 -->
<div id="box" class="abc" title="关灯吃面" msg="平头哥">小王</div>

<script>
    var box = document.getElementById('box');

    // 写在标签上的自定义属性，可以在html结构中查看，但是js不能操作（点和中括号的方式不能操作）
    console.log(box.title);
    console.log(box.msg);

    // ------------------------------
    // 通过js添加的自定义属性，在html结构中不可见，但可以通过js获取
    box.ddd = '东风吹，战鼓擂'; // 添加自定义属性
    console.log(box.ddd);
</script>