使用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屬性的瀏覽器默認值

回答

相關問題