那你令你意想不到的 JS/CSS 用法

[arlyxiao]

setTimeout loop 输出 变量

最常见的一个解法是使用匿名函数

for(var i = 0; i < 5; i++){
    (function(n){
        setTimeout(function(){
            console.log(n);
        }, 200);
    })(i); 
}

然而事实上，setTimeout 有第三个参数可以解决这个问题

for(var i = 0; i < 5; i++){
    setTimeout(function(n){
        console.log(n);
    }, 200, i);
}

:focus-within 更大范围获取焦点

一般情况下，使用 :focus 可以控制当前元素获取焦点时的状态，如果想更大范围去控制焦点，可以使用 :focus-within，参考代码

<div class="box" tabindex="0"> 
  <label for="text">Username: </label> 
  <input id="text" type="text" />
</div>

.box{
    padding: 10px;
}
.box:focus-within {
  background-color: skyblue; 
}

唯一的问题是浏览器兼容性较差。