李观杰的博客

勤学如春起之苗,不见其增日有所长。辍学如磨刀之石,不见其损日有所亏。...

010-vue之操作dom相关函数

/**
 * 判断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)
}

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/liguanjie8/article/details/79958269
文章标签: dom es6 vue
个人分类: vueJs
上一篇009-vue之日期操作相关函数
下一篇011-vue之操作url相关
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭