さまざまなブラウザで一般的に使用されるネイティブ JS ツール クラスと互換性があります。ブラウザのスクロール バーの幅と高さ、イベント、部分的な印刷などを取得します。

1. ブラウザの表示領域の幅と高さを取得します（スクロールバーとスクロールを除く）。

ieE<=8 は innerWidth 属性と innerHeight 属性をサポートしません。ie6 は
document.documentElement.clientHeight をサポートします。他の IE バージョンは document.body.clientHeight を使用します。

export function getWinHeight() {
    
    
  var windowHeight;
  if (window.innerHeight) {
    
     // 除了IE 8 以外的浏览器
    windowHeight = window.innerHeight
  } else if (document.documentElement && document.documentElement.clientHeight) {
    
     /* IE6 浏览器 */
    windowHeight = document.documentElement.clientHeight
  } else if (document.body) {
    
     //其他版本的IE浏览器
    windowHeight = document.body.clientHeight
  }
  return windowHeight;
}

export function getWinWidth() {
    
    
  var windowWidth;
  if (window.innerWidth) {
    
     // 除了IE以外的浏览器
    windowWidth = window.innerWidth
  } else if (document.documentElement && document.documentElement.clientWidth) {
    
     /* IE6 浏览器 */
    windowWidth = document.documentElement.clientWidth
  } else if (document.body) {
    
     //其他版本的IE浏览器
    windowWidth = document.body.clientWidth
  }
  return windowWidth;
}

clientHeight/Width は以下を指します。

2. イベントの追加と削除

ieE<=8 は document.addEventListener イベントの追加と document.removeEventListener イベントの削除をサポートしていません

export const on = (function() {
    
    
  if (document.addEventListener) {
    
    
    return function(element, event, handler) {
    
    
      if (element && event && handler) {
    
    
        element.
        (event, handler, false);
      }
    };
  } else {
    
    
    return function(element, event, handler) {
    
    
      if (element && event && handler) {
    
    
        element.attachEvent('on' + event, handler);
      }
    };
  }
})();

export const off = (function() {
    
    
  if (document.removeEventListener) {
    
    
    return function(element, event, handler) {
    
    
      if (element && event) {
    
    
        element.removeEventListener(event, handler, false);
      }
    };
  } else {
    
    
    return function(element, event, handler) {
    
    
      if (element && event) {
    
    
        element.detachEvent('on' + event, handler);
      }
    };
  }
})();

3. スクロールバーの幅を取得する

IEはブラウザのスクロールバーの設定・取得をサポートしていません。elementUI2.13.2バージョンでのスクロールバーの取得方法は以下の通りです。

export scrollbarWidth function() {
    
    
  const outer = document.createElement('div');
  outer.className = 'el-scrollbar__wrap';
  outer.style.visibility = 'hidden';
  outer.style.width = '100px';
  outer.style.position = 'absolute';
  outer.style.top = '-9999px';
  document.body.appendChild(outer);

  const widthNoScroll = outer.offsetWidth;
  outer.style.overflow = 'scroll';

  const inner = document.createElement('div');
  inner.style.width = '100%';
  outer.appendChild(inner);

  const widthWithScroll = inner.offsetWidth;
  outer.parentNode.removeChild(outer);
  scrollBarWidth = widthNoScroll - widthWithScroll;

  return scrollBarWidth;
};

☞ソースコードを刺す

4. ローカル印刷機能の実装

/**
  * @param {DOM} dom 对象
  * @return {Null} null 实现局部打印功能
  */
export const printDom = (dom) => {
    
    
  let print = document.getElementById("print_dom_version1")
  if (!print) {
    
    
    let dom = document.createElement("div")
    dom.id = "print_dom_version1"
    document.body.appendChild(dom)
    print = dom
  }
  print.style.display = ''
  print.innerHTML = dom.innerHTML
  let bodyCh = document.body.children
  let dis = bodyCh[0].style.display
  bodyCh[0].style.display = 'none'
  window.print()
  print.style.display = 'none'
  bodyCh[0].style.display = dis
}