原生JS操作Dom方法汇总

是否含有指定的类

function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

添加指定的类

function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }
  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}

删除指定的类

function removeClass(el, className) {
  if (!hasClass(el, className)) {
    return
  }
  let primaryClass = el.className.split(' ')
  let newClass = primaryClass.filter((item, index) => {
    return item !== className
  })
  el.className = newClass.join(' ')
}

获取或者设置data-xxx的值

function getData(el, name, val) {
  const prefix = 'data-'
  if (val) {
    return el.setAttribute(prefix + name, val)
  }
  return el.getAttribute(prefix + name)
}

添加浏览器样式兼容的前缀

let elementStyle = document.createElement('div').style
let vendor = (() => {
  let transformNames = {
    webkit: 'webkitTransform',
    Moz: 'MozTransform',
    O: 'OTransform',
    ms: 'msTransform',
    standard: 'transform'
  }

  for (let key in transformNames) {
    if (elementStyle[transformNames[key]] !== undefined) {
      return key
    }
  }
  return false
})()

function prefixStyle(style) {
  if (vendor === false) {
    return false
  }
  if (vendor === 'standard') {
    return style
  }
  return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}

使用方法示例：

import { prefixStyle } from 'utils/dom.js'
const transform = prefixStyle('transform')
const transition = prefixStyle('transition')

// 这里的 el 根据实际情况替换成DOM节点
el.style[transform] = 'translate3d(0, 0, 0)'
el.style[transition] = 'all 0.4s ease'

获取某样式

function getStyle(el, attr) {
  if (el.currentStyle) {
    return el.currentStyle[attr]
  } else {
    return getComputedStyle(el, null)[attr]
  }
}