Javascript 元素样式 this指向

获取元素样式

基础获取

标准浏览器(ie9, chrome, ff):

getComputedStyle(元素).属性名

ie(ie8及以下):

元素.currentStyle.属性名

// 获取div
var div = document.getElementsByTagName('div')[0];
console.log(div);
// 获取样式:
// 标准:
// var w = getComputedStyle(div).width;
// console.log(w);
​
// var h = getComputedStyle(div).height;
// console.log(h);
​
console.log(getComputedStyle); // 标准: 函数  ie: undefined
console.log(div.currentStyle); // 标准: undefined ie: 对象
// ie:
// Cannot read properties of undefined (reading 'width'): 
// var w = div.currentStyle.width;
// console.log(w);

兼容

getComputedStyle: 函数 currentStyle: 对象

处理兼容: 一个函数 一个是对象/属性 可以用函数是否存在来做判断

如果函数 xx() 来做调用的话 判断的时候 window.xx 是否存在来做判断

console.log(window.getComputedStyle);
if(window.getComputedStyle){
    // 标准
    var w = getComputedStyle(div).width;
} else {
    // ie
    var w = div.currentStyle.width;
}
console.log(w);

封装

function getStyle(ele, attr) {
    // ele: 元素
    // attr: 属性
    if (window.getComputedStyle) {
        // 标准
        var w = getComputedStyle(ele)[attr];
    } else {
        var w = ele.currentStyle[attr];
    }
    // console.log(w);
    return w;
}

使用

<!-- 1. 引入公用js -->
<script src="../fsy.js"></script>
<script>
    var div = document.getElementsByTagName('div')[0];
    console.log(div);
​
    var w = getStyle(div, 'width');
    console.log(w);
</script>

this

概念

this: 指代词, 在不同的位置有不同的含义

全局: window

普通函数: window

对象的方法: 当前对象

事件处理函数: 触发源 点谁就指向谁

console.log(this); // window
function fn() {
    console.log(this);
}
fn();
​
var obj = {
    abs: function () {
        console.log(this);
    }
};
console.log(obj.abs);
obj.abs();
​
lis[0].onclick = function () {
    console.log(this);
}

使用

在for循环所嵌套的事件中, 得不到正确的对象的时候 用this来指代

// 点击每一个li 输出当前li的内容
// 1. 获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);
// 2. 每一个
for(var i = 0; i < lis.length; i++){
    // 3. 加事件
    lis[i].onclick = function () {
        console.log(this); // 用this指代当前的触发源
        console.log(this.innerHTML);
    };
}