全选
用户复制粘贴文本
div { -webkit-user-select: all; /* for Safari */ user-select: all; }
可以加上tabindex=0 来包含文本的元素可聚焦,css可以知道何时点击该元素
<div class="aaa" tabindex="0">
<p>hello works!</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
<p>scrollTop parseInt()</p>
</div>
style
.aaa{
-webkit-user-select: all; /* for Safari */
user-select: all;
}
user-select:all 在元素具有焦点之后切换到正常
.aaa:focus{
animation: select 100ms step-end forwards;
}
@keyframes select {
to {
-webkit-user-select: text;
user-select: text;
}
}
user-select: none; 文本是不可选中的
CSS随机伪元素
虽然从表面上看是随机的,但是实际上是由规律可寻的,我们给伪元素五个背景颜色,相当于在这5个伪类的随机,其实可以根据优先级每一个每一个的算出来,不过这种方式很方便,应用于添加不同的背景
classList api
let el=document.querySelector('#el')
el.classList.add('aaa')
el.classList.add('aaa','bbb','ccc')
el.classList.remove('aaa')
el.classList.remove('aaa','bbb','ccc')
el.classList.forEach(className=>{
//拿到的class进行操作
})
// 把第一个类替换成第二个
el.classList.replace('aaa','ccc')
// 切换(如果存在就删除,不存在就添加)
el.classList.toggle('aaa')
// add class
el.classList.toggle('aaa',true)
//remove 删除类
el.classList.toggle('aaa',false)
// 可以添加逻辑
this.aaa.nativeElement.classList.toggle('bbb',(()=>{
return 1==1
})())
// 检测是否包含这个类
el.classList.contains('bbb')
// 查看那个类 从0开始
el.class.item(0)
Flexbox应用于伪元素添加内容
我们根据
attr(data-initials)把css中内容提取到:before的content中然后根据
flex来修改它们的布局方式
const 的问题
你不能重新分配对象或者数组,不然会报错
一道有趣的面试题
[,,,,,].toString() //执行结果是什么
其实很简单,容易忽略的点是
[,].toString()
// ""
所以最后的结果是少一次
// ",,,,"