javascript - 获取计算样式并省略默认值

Question

我正在尝试获取元素的当前运行时样式并过滤掉具有默认值的属性。例如，使用这样的标记:

<style>
    .foo { background: red }
    span { font-size:30px }
</style>


<div style="color: blue">
    <span id="bar" class="foo">hello</span>
</div>

我希望结果是:

 background-color: red;
 color: blue;
 font-size: 30px;

我试过 window.getComputedStyle，但它返回了很多东西，我不确定如何过滤掉默认值。任何指针将不胜感激。

Answer 1

就这样吧 我通过添加一个新的虚拟 DOM 元素来做到这一点，以了解任何元素的默认样式。

/**
 * IE does not have `getComputedStyle` 
 */

window.getComputedStyle = window.getComputedStyle || function( element ) {
  return element.currentStyle;
}

/**
 * get computed style for an element, excluding any default styles
 *
 * @param {DOM} element
 * @return {object} difference
 */

function getStylesWithoutDefaults( element ) {

  // creating an empty dummy object to compare with
  var dummy = document.createElement( 'element-' + ( new Date().getTime() ) );
  document.body.appendChild( dummy );

  // getting computed styles for both elements
  var defaultStyles = getComputedStyle( dummy );
  var elementStyles = getComputedStyle( element );

  // calculating the difference
  var diff = {};
  for( var key in elementStyles ) {
    if(elementStyles.hasOwnProperty(key)
          && defaultStyles[ key ] !== elementStyles[ key ] )
    {
      diff[ key ] = elementStyles[ key ];
    }
  }

  // clear dom
  dummy.remove();

  return diff;
}


/**
 * usage
 */

console.log( getStylesWithoutDefaults( document.getElementById( 'bar' ) ) );

注意事项:

• 结果将有一些额外的属性，而不仅仅是您提到的那些。

demo - console should be opened