JavaScript克隆元素样式CloneStyle

核心JS

class CloneStyle {
  constructor(container) {
    this.container = container || document.getElementsByTagName('head')[0];
    this.styleEl = document.createElement('style');
    this.valueReg = /^(number|string)$/;

    this.container.appendChild(this.styleEl)
  }

  clone(el, cache = true) {
    if (cache && el.cloneName) return el.cloneName;
    const className = 'clone' + +new Date;
    let cssText = '';

    const style = el.style;
    const stylelist = this.getComputedStyle(el)
    for (let key in style) {
      const value = stylelist[key];
      if (value !== '' && this.valueReg.test(typeof value)) {
        key = key.replace(/([A-Z])/g, "-$1").toLowerCase();
        cssText += key + ':' + value + ';';
      }
    }

    this.addHeadStyle('.' + className + '{' + cssText + '}');

    el.cloneName = className;
    return className;
  }

  addHeadStyle(content) {
    const style = this.styleEl;
    style.styleSheet && (style.styleSheet.cssText += content) || style.appendChild(document.createTextNode(content));
  }

  getComputedStyle(el) {
    return 'getComputedStyle' in window ? getComputedStyle(el, null) : el.currentStyle
  }

  getStyle(el, key) {
    return this.getComputedStyle(el)[key]
  }

  destroy() {
    this.styleEl.parentNode && this.styleEl.parentNode.removeChild(this.styleEl)
  }
}

示例

const cloneStyle = new CloneStyle();

const div = document.getElementById('div')

// cloneDom
const node = div.cloneNode(true);
node.className = cloneStyle.clone(div); // => cloneClassName
document.body.appendChild(node);