如何獲得自定義CSS屬性列表

我正在查看自定義CSS屬性，並已拿出下面的代碼。如何獲得自定義CSS屬性列表

如果我在畫布標籤上使用STYLE屬性內聯CSS（如下所示：style =「 - rgLinewidth：3」），那麼我可以使用下面顯示的腳本獲取自定義CSS值。

但是使用標籤，如下所示，那麼它不顯示自定義CSS屬性。

是否有可能？如果是的話如何？

<html> 
    <head> 
     <style> 
      canvas#cvs { 
       --rgLinewidth: 3; 
       background-color: red; 
      } 
     </style> 
    </head> 
<body> 

    <canvas id="cvs" width="600" height="250">[No canvas support]</canvas> 

    <script> 
     canvas = document.getElementById("cvs"); 
     styles = window.getComputedStyle(canvas); 

     alert(styles.getPropertyValue('background-color')); 
     alert(styles.getPropertyValue('--rgLinewidth')); 

     for (var i=0; i<styles.length; i++) { 
      if (canvas.style[i].indexOf('--rg') === 0) { 
       var value = styles.getPropertyValue(canvas.style[i]); 
       alert([canvas.style[i], value]); 
      } 
     } 
    </script> 
</body> 
</html>

來源

2016-07-08 Richard

因爲您查詢計算樣式，然後嘗試檢索對應從內嵌的風格，他們不存在的屬性值，它不工作 - 你的畫布沒有定義嵌入式樣式。您需要通過相同的styles對象查詢值，您可以在其中找到屬性。

考慮哪些當傳遞一個元素下面的函數，將通過其計算式的搜索和返回第一個CSS變量，其名稱的值開始與--rg：

function find_first_rg_value(el) { 
    var styles = getComputedStyle(el); 
    for (var i = 0; i < styles.length; i++) { 
     if (styles[i].startsWith('--rg')) { 
      return styles.getPropertyValue(styles[i]); 
     } 
    } 
}

（使用像find_first_rg_value(canvas)）

正如我所說的，我的方法與您的方法之間的區別在於您嘗試從canvas.style[i]中獲取值，但canvas.style實際上是空的。改爲使用styles。顧名思義，計算風格（getComputedStyle）包含根據CSS級聯，繼承等計算的「彙總」風格，以及內聯風格，如果有的話，應用於頂層（覆蓋優先級）。因此分配內聯樣式會影響計算的樣式，但查詢內聯樣式只會爲您提供您分配的內聯樣式，不會再有。

這意味着，在大多數情況下，像你這樣的人會想要使用getComputedStyle。此外，由於無法使用style.fontName語法查詢CSS變量，因此無論您是處理內聯還是計算樣式對象，都需要使用getPropertyValue函數（傳遞的屬性名稱中的所有破折號完整）。

來源

2016-07-08 10:56:01 amn

Oki doki，我現在有這個：canvas = document.getElementById（「cvs」）; styles = getComputedStyle（canvas）; （樣式[i] .indexOf（' - rg'）=== 0）{ alert（styles [i]）;如果（樣式[i] .ini） alert（styles.getPropertyValue（styles [i]））; } }但它只適用於Firefox。不是Chrome或IE。這是我需要的 - 查找所有的-rg值，無論他們是在樣式塊還是內聯樣式屬性中定義。 – Richard

這是因爲只有FF完全支持CSS變量嗎？ – Richard

這是我設置的測試頁。它只適用於FF：http://www.rgraph.net/tests/css-variables.html – Richard

如何獲得自定義CSS屬性列表

回答

相關問題