Window.getComputedStyle不顯示嵌入式樣式

我有簡單的HTML這樣的：Window.getComputedStyle不顯示嵌入式樣式

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="UTF-8"> 
     <title></title> 
    </head> 
    <body> 
     <svg id="svg" viewBox="0 0 594 600" preserveAspectRatio="xMinYMin meet"> 
      <rect id="rect" fill="#98df8a" style="width: 100px; height: 100px;"> 
      </rect> 
     </svg> 
    </body> 
</html>

當我使用：window.getComputedStyle(document.getElementById('rect'))，我得到兩個width和height的價值是auto，而不是像100px我期望的。

這是怎麼回事？如果是這樣，我怎麼能使它返回100px？

我需要此函數將外部CSS中定義的所有樣式轉換爲svg元素的內聯樣式屬性，以便稍後可以導出它。

來源

2017-03-03 Tu Anh

你可以只使用document.getElementById('rect').style.height和document.getElementById('rect').style.width，如果你要處理的東西款式任意名單如下：

var exportStyleKeys = ['width', 'height']; 
var rect = document.getElementById('rect'); 
var exportStyles = exportStyleKeys.reduce((styles, styleKey) => { 
    styles[styleKey] = rect.style[styleKey]; 
    return styles; 
}, {});

JSFiddle

來源

2017-03-03 21:34:49 Jack

window.document.getElementById('rect').style.width將返回內聯CSS width屬性。

嘗試打擊代碼

var rect = window.document.getElementById('rect'); 
 
console.log(rect.style.width);

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title></title> 
 
    </head> 
 
    <body> 
 
     <svg id="svg" viewBox="0 0 594 600" preserveAspectRatio="xMinYMin meet"> 
 
      <rect id="rect" fill="#98df8a" style="width: 100px; height: 100px;"> 
 
      </rect> 
 
     </svg> 
 
    </body> 
 
</html>

來源

2017-03-03 21:36:26

Window.getComputedStyle不顯示嵌入式樣式

回答

相關問題