原生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] } }

创作不易,若本文对你有帮助,欢迎打赏支持作者!

 分享给好友: