js-day05 获取元素样式 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);
    };
}

排他

排他: 除了自己有特定效果之外 其他的都是默认样式

实现过程: 1. 所有元素都设置成默认样式

\2. 指定元素添加特定效果

// 1. 获取元素
var lis = document.getElementsByTagName('li');
console.log(lis);
// 2. 每一个
for(var i = 0; i < lis.length; i++){
    // 3. 加事件
    lis[i].onclick = function () {
        // 先去清除所有的li的字体颜色
        for(var j = 0; j < lis.length; j++){
            lis[j].className = '';
        }
​
        // 4. 让当前的li的颜色变成黑色
        // 找到当前li
        console.log(this);
        this.className = 'active';
    }
}

注意

一般假定初始状态的时候 不会写太复杂的值 一般一个数字、或者 布尔值

假设内容 随意指定

// 获取元素
var img = document.getElementsByTagName('img')[0];
console.log(img);
​
// 不知道灯是什么状态 可以假设初始状态
// 一般假定初始状态的时候 不会写太复杂的值 一般一个数字、或者 布尔值
// 1--黑 2--亮  true--亮 false--黑
var tag = 'dark'; // 假设内容 随意指定  dark--黑 light--亮
​
// 点击
img.onclick = function () {
    console.log(this.src); // file:///Users/fushuangyu/Desktop/offcn/0712/day05/images/dark.jpg
    if(tag == 'dark'){
        // 灯是黑的 变亮
        img.src = './images/bright.jpg';
        // 更新状态
        tag = 'light';
    } else {
        img.src = './images/dark.jpg';
        tag = 'dark';
    }
};

自定义属性

属性: 写在起始标签上的 除了标签以外的 都是属性

固有属性: 规定好作用的 class id alt src...

自定义属性: 由程序员自己去设定的属性 tag

操作属性:

\1. 获取属性的值:

var 变量 = 元素.属性;

var 变量 = 元素[属性];

\2. 设置属性的值:

元素.属性名 = 值;

元素[属性名] = 值;

直接写在html页面中的自定义属性通过上述两种方式不能获取

通过js设置给元素的自定义属性，在页面中看不到, 但是在js中可以正常操作

多个元素之间的同名的属性 互相不影响

// 1. 获取属性值
console.log(div.id);
console.log(div.tag); // undefined

// 2. 设置属性
div.t = 'abc123';

console.log(div.t); // abc123


var img = document.getElementsByTagName('img')[0];
img.t = '987654321';

// 多个元素之间的同名的属性 互相不影响
console.log(div.t, img.t);

自定义索引

在自定义属性中 存储下标 的行为 就是自定义索引

// 2. 每一个
for(var i = 0; i < btns.length; i++){

    // 存储自定义索引
    btns[i].index = i;


    // 3. 加事件
    btns[i].onclick = function () {
        // 获取到对应的颜色
        // 颜色和按钮的关系: 5个 
        // 按钮和颜色: 一一对应  下标是一致
        // 获取当前按钮的下标 ---> 当前按钮的index属性的值
        // console.log(i);
        console.log(this.index);
        // 通过下标获取对应的arr中的颜色
        console.log(arr[this.index]);

        // 颜色设置给body  快速获取页面body的方式: document.body
        // console.log(document.body);
        document.body.style.background = arr[this.index];

    };
}