JavaScript代码段

隐藏所有指定的元素

const hide = (...el)=>{
    [...el].forEach(e=>e.style.display='none');
};
//示例：隐藏页面上所有img元素
hide(document.querySelector("img"))

检查指定元素是否具有指定类

const hasClass = (el,className)=>{
    return el.classList.contains(className);
};
//使用示例
hasClass(document.querySelector('p'),'plcs')

切换一个元素的指定类

const toggleClass = (el,className)=>el.classList.toggle(className);
//使用示例
toggleClass(document.querySelector('p'),'pclx');

获取元素的滚动位置

const getScrollPosition = (el=window)=>{
    return {
        x:el.pageXOffset !== undefined ? el.pageXOffset :el.screenLeft,
        y:el.pageYOffset !== undefined ? el.pageYOffset :el.screenTop
    }
};
//使用示例：默认获取文档的滚动位置
getScrollPosition();

平滑滚动到顶部

 const scrollToTop = ()=>{
     const c = document.documentElement.scrollTop || document.body.scrollTop;
     if(c>0){
         window.requestAnimationFrame(scrollToTop);
         window.scrollTo(0,c-c/8);
     }
 };
//使用示例
scrollToTop()

检查指定元素是否包含指定的子元素

const fatherContainsSon = (parent, child) => parent !== child && parent.contains(child);
//使用示例
fatherContainsSon(document.querySelector('body'),document.querySelector('div'));//true
fatherContainsSon(document.querySelector('body'),document.querySelector('body'));//false

检查指定元素是否在视口中可见

const elementIsVisibleInViewport = (el, partialVisible = false) => {
    const {top, left, bottom, right} = el.getBoundingClientRect();
    const {innerHeight, innerWidth} = window;
    return partialVisible ?
        ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    :
    top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth
};
//使用示例
elementIsVisibleInViewport(el);//部分可见即可
elementIsVisibleInViewport(el,true);//全部可见

判断设备是移动设备还是PC

const detectDeviceType = ()=>{
    return /Android|webOS|iPhone|iPad|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?"Mobile":"Desktop";
};
//使用示例
detectDeviceType();//Desktop

获取当前页面的url

window.location.href

判断邮箱格式

const checkEmail = data => {
  const reg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/g
  if (reg.test(data)) return true
}

最准确的类型判断

const jugeType = data => {
    return Object.prototype.toString.call(data).replace(/\[object\s(.+)\]/, '$1').toLowerCase();
};
jugeType(null);//null