010-vue之操作dom相关函数

最新推荐文章于 2021-06-11 13:18:23 发布

liguanjie8

最新推荐文章于 2021-06-11 13:18:23 发布

阅读量376

点赞数

分类专栏： vueJs 文章标签： dom es6 vue

本文链接：https://blog.csdn.net/liguanjie8/article/details/79958269

版权

vueJs 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

/**
 * 判断dom是否拥有某个class
 * @param el
 * @param className
 * @returns {boolean}
 */
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
  return reg.test(el.className);
}

/**
 * 为dom添加class
 * @param el
 * @param className
 */
export function addClass(el, className) {
  if (hasClass(el, className)) {
    return
  }

  let newClass = el.className.split(/\s/);
  newClass.push(className);
  el.className = newClass.join(' ');
}

/**
 * 为dom删除class
 * @param el
 * @param className
 */
export function removeClass(el, className) {
  if (hasClass(el, className)) {
      let newClass = el.className.split(/\s/);
      let splice_index = newClass.indexOf(className);
      newClass.splice(splice_index,1);
      el.className = newClass.join(' ');
  }else{
      return
  }
}

/**
 * 获取 data- 属性值
 * @param {*} el 
 * @param {*} name 
 * @param {*} val   若有值,则是setData()
 */
export function getData(el, name, val) {
  const prefix = 'data-';
  if (val) {
    return el.setAttribute(prefix + name, val)
  }
  return el.getAttribute(prefix + name)
}

/**
 * 用JS设置css3属性时自动为其属性增加浏览器厂商
 * @param {*} style css3属性
 * 原理 : 根据浏览器相应的情况,得到对应的css3样式 
 * 用法 :
 *    const transform = prefixStyle('transform');
 *    this.$refs.dom.style[tramsform] = `translate3d(0,0,0)`;
 */
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
})();

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