1

是否可以使用 JS 检索 CSS 属性的浏览器默认值，忽略任何内联/导入的样式？

一些上下文：我正在使用 JS 内联特定 SVG 元素及其子元素的所有样式（这允许我使用canvg将其转换为 PNG ）。目前，我的输出对于每种可用的样式都非常臃肿，我希望能够从包含在内的样式数组中丢弃任何使用浏览器默认值的属性。

正在发生的事情的演示：

$.extend($.fn, {
  makeCssInline: function() {
    this.each(function(idx, el) {
      var style = el.style;
      var properties = [];
      for (var property in style) {
        if ($(this).css(property)) {
          // TODO: Only in-line this style if it's not browser default
          properties.push(property + ':' + $(this).css(property));
        }
      }
      this.style.cssText = properties.join(';');
      $(this).children().makeCssInline();
    });
  }
});

$(document).ready(function() {
  $("#before").text($("svg")[0].outerHTML.length);
  $("svg").makeCssInline();
  $("#after").text($("svg")[0].outerHTML.length);
});
svg circle {
  fill: #080;
}

svg text {
  fill: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg version="1.1" baseProfile="full" width="300" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="50" r="50" />
  <text x="150" y="65" font-size="40" text-anchor="middle">SVG</text>
</svg>

<p>Total characters before in-lining styles: <span id="before"></span></p>
<p>Total characters after in-lining styles: <span id="after"></span></p>

如您所见，即使对于简单的 SVG，此过程也会添加大量不必要的数据。

4

1 回答 1

2

您可以使用getComputedStyle()计算新创建元素的默认样式值。但是必须在 DOM 中插入新元素才能使其工作：

function getDefaultStyleOf(tagName, name)
{
    var element = document.createElement(tagName);

    document.body.appendChild(element);
    var value = getComputedStyle(element)[name];
    document.body.removeChild(element);

    return value;
}

console.log(getDefaultStyleOf('code', 'font-size'));
于 2017-12-07T02:34:26.797 回答