dom要素のスタイルを取得するgetComputedStyle

794 ワード

dom要素のcssスタイルを取得したい場合は、styleプロパティを取得することを直接考えます.
document.getElementById('div').style
しかし、実際にはあなたが望んでいるほどではありません.style属性の各値の大部分は空です.スタイルはcssによって生成されることが多いからです.
Jqueryにあります.css('color')の方法は、実は原生のgetComputedStyleによって実現されています.
以下に実装方法を示します.
function getStyle(element, styleName) {
  if (!element || !styleName) return false;
  if (styleName === 'float') styleName = 'cssFloat';

  try {
    const computed = document.defaultView.getComputedStyle(element, '');
    return element.style[styleName] || computed ? computed[styleName] : null;
  } catch (e) {
    return element.style[styleName];
  }
};

getComputedStyleの最初のパラメータはdomオブジェクトで、2番目は擬似クラスセレクタです.
WindowsのようにgetComputedStyle(element, "::after")