获取元素样式
基础获取
标准浏览器(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];
};
}