一、style的操作样式style对象操作样式的特点
1. 每一个DOM对象都有一个style属性(标签的行内样式), style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
2. 如果样式的名字带了 -，比如background - color, 到了style对象中，变成了驼峰命名法，backgroundColor（因为 - 在js中 - 会被解析成减号）
3. style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。
4、动态的css推荐使用style方式设置
二、排他思想: 干掉所有人 复活他自己
<body>
<button>我是第1个按钮</button>
<button>我是第2个按钮</button>
<button>我是第3个按钮</button>
<button>我是第4个按钮</button>
<button>我是第5个按钮</button>
<button>我是第6个按钮</button>
<button>我是第7个按钮</button>
<button>我是第8个按钮</button>
<button>我是第9个按钮</button>
<button>我是第10个按钮</button>
<script>
// 需求: 点谁谁变红, 其他人不变红
// 获取到所有的按钮
let btns = document.querySelectorAll('button');
// 批量注册点击事件
for (let index = 0; index < btns.length; index++) {
btns[index].onclick = function () {
// 干掉所有人
for (let index = 0; index < btns.length; index++) {
btns[index].style.backgroundColor = '';
}
// 复活他自己
// this => 代表当前的事件源
this.style.backgroundColor = 'red';
};
}
// 排他思想: 干掉所有人 复活他自己
// 使用场景: 唯我独尊
</script>三、切换思想
// 切换思想
// 设置一个开关
let flag = true;
// 根据开关状态执行对应的分支
if(flag===true) {
//flag为true时执行的代码
} else {
//flag为false时执行的代码
}
// 将开关取反
flag = !flag;四、更多事件
// 注册鼠标移入事件
box.onmouseenter = function () {
console.log('大爷 你来咯 里边请');
};
// 注册鼠标移出事件
box.onmouseleave = function () {
console.log('大爷 下次再来!!');
};
// 获取焦点触发
ipt.onfocus = function () {
console.log('我就是全场最靓的仔');
};
//失去焦点的时候触发
ipt.onblur = function () {
console.log('我曾经也是一个王者!!');
};
//当表单的内容改变的时候(失去焦点的时候再去检测)
ipt.onchange = function () {
console.log('我被改变咯');
};
//当表单的内容发生改变的时候触发 (实时触发)
ipt.oninput = function () {
console.log('我被改变咯');
};
五、补充
若需要将非纯数组转换成数组。不能使用Number去转换 因为Number转换的时候但凡出现不能转换的 会返回NaN => not a number。利用 parseInt系列: 转换的过程中, 如果遇到不能转换的则停止转换, 将前面已经转换好的结果输出出来。