使用JavaScript查找CSS属性的浏览器默认值

是否可以使用JS检索CSS属性的浏览器默认值，忽略任何内联/导入样式？使用JavaScript查找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这个过程中增加了一个巨大的不必要的数据量。

来源

2017-07-27 DBS

'我想能够放弃其使用的浏览器默认的任何属性values.'这不是CSS如何工作。无论您是否设置，所有属性都始终设置在每个元素上。您无法删除CSS属性，只能将其设置恢复为默认值。这部分地是为什么使用'css（）'是一个坏主意。使用类来改变元素的样式，然后可以根据需要开启/关闭该类。 –

@RoryMcCrossan对不起，这是措辞不佳。我的意思是我希望能够放弃我的数组中的默认样式，这些样式将被内联。 – DBS

好的。即使在这种情况下，你也为自己做了很多额外的工作。我强烈建议使用类来代替。 –

您可以使用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-07 02:34:26

使用JavaScript查找CSS属性的浏览器默认值

回答

相关问题