javascript原生技巧篇

全选

用户复制粘贴文本

div {
    -webkit-user-select: all; /* for Safari */
    user-select: all;
}

可以加上tabindex=0 来包含文本的元素可聚焦,css可以知道何时点击该元素

  
hello works!
  
scrollTop parseInt()
  
scrollTop parseInt()
  
scrollTop parseInt()
  
scrollTop parseInt()
  
scrollTop parseInt()
  
scrollTop parseInt()
  
scrollTop parseInt()

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; 文本是不可选中的

See the Pen <a href='https://codepen.io/973782523/pen/ExPeEWj'>ExPeEWj</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

CSS随机伪元素

虽然从表面上看是随机的,但是实际上是由规律可寻的,我们给伪元素五个背景颜色,相当于在这5个伪类的随机,其实可以根据优先级每一个每一个的算出来,不过这种方式很方便,应用于添加不同的背景

See the Pen <a href='https://codepen.io/973782523/pen/NWxLzjj'>weiyuansusuiji</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

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应用于伪元素添加内容

See the Pen <a href='https://codepen.io/973782523/pen/RwreWLg'>flexbox 应用于伪元素</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

我们根据attr(data-initials) 把css中内容提取到:before 的content中

然后根据flex 来修改它们的布局方式

const 的问题

你不能重新分配对象或者数组,不然会报错

一道有趣的面试题

[,,,,,].toString()  //执行结果是什么

其实很简单,容易忽略的点是

[,].toString()
// ""
所以最后的结果是少一次
// ",,,,"

胡里胡哨

See the Pen <a href='https://codepen.io/973782523/pen/OJMBXPg'>好看的鹿角粒子特效</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

---

See the Pen <a href='https://codepen.io/973782523/pen/WNraxwJ'>气泡</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.

---

See the Pen <a href='https://codepen.io/973782523/pen/yLeRamM'>SpaceX in stars</a> by 973782523 (<a href='https://codepen.io/973782523'>@973782523</a>) on <a href='https://codepen.io'>CodePen</a>.