Style 操作

getBoundingClientRect：获取元素自身大小和相对于视口的位置

const { top, bottom, left, right, x, y, width, height } = el.getBoundingClientRect()
// width = width + padding + border (box-sizing: content-box)

cssText: 获取(设置)行内样式

el.style.cssText // 'height: 300px; width: 300px; padding: 20px;'

/**
 * @desc:
 * @param {*} el
 * @param {*} styleArr: 样式数组
 * @example:
 * setStyle(el, ['left: 40px', 'top: 40px'])
 */
function setStyle(el, styleArr) {
  const original = el.style.cssText.split(";");
  original.pop(); // 会多出一个空字符串，所以截取
  el.style.cssText = original.concat(styleArr).join(";") + ";";
}

getComputedStyle: 获取元素当前的样式

getComputedStyle(el) // 第二个参数可以传递一个伪元素，一般都传nul

className操作

/**
 * @description: hasClass
 * @param {*} el
 * @param {*} cls
 * @return {*}
 */
export function hasClass(el, cls) {
  if (!el || !cls) return false;
  if (cls.indexOf(" ") !== -1)
    throw new Error("className should not contain space.");
  if (el.classList) {
    return el.classList.contains(cls);
  } else {
    return (" " + el.className + " ").indexOf(" " + cls + " ") > -1;
  }
}

/**
 * @description: addClass
 * @param {*} el
 * @param {*} cls
 * @return {*}
 */
export function addClass(el, cls) {
  if (!el) return;
  var curClass = el.className;
  var classes = (cls || "").split(" ");

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.add(clsName);
    } else if (!hasClass(el, clsName)) {
      curClass += " " + clsName;
    }
  }
  if (!el.classList) {
    el.setAttribute("class", curClass);
  }
}

/**
 * @description: removeClass 兼容低版本浏览器
 * @param {Dom} el
 * @param {String} cls
 * @return {*}
 */
export function removeClass(el, cls) {
  const trim = function (string) {
    return (string || "").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g, "");
  };  
  if (!el || !cls) return;
  var classes = cls.split(" ");
  // 主要是方便replace使用
  var curClass = " " + el.className + " ";

  for (var i = 0, j = classes.length; i < j; i++) {
    var clsName = classes[i];
    if (!clsName) continue;

    if (el.classList) {
      el.classList.remove(clsName);
    } else if (hasClass(el, clsName)) {
      curClass = curClass.replace(" " + clsName + " ", " ");
    }
  }
  if (!el.classList) {
    el.setAttribute("class", trim(curClass));
  }
}