通過Javascript繼承CSS值

在我的頁面上，我通過JavaScript更改了一些CSS樣式。當我嘗試並拉取一個已被繼承的值時，它會變成空白。考慮以下幾點：通過Javascript繼承CSS值

.Sliding 
    { 
     display: none; 
     overflow: hidden; 
    } 

    .Sliding #FilterBox 
    { 
     height: 185px; 
     background-color: Fuchsia; 
    }

和HTML：

<div class="Sliding" id="FilterBox"> 
     <h3>Test Form</h3> 
     This is a test/<br /> 
     12345 
</div>

如果我看元素 '的document.getElementById（objname表）.style.display' 的空白？如何通過javascript讀取顯示值？

來源

2009-07-23 cschear

謝謝大家。使用getComputedStyle幫助解決了我的問題。我將它作爲getElementById（）。style僅用於各個樣式設置 - 不是由類或ID設置的樣式。 – cschear 2009-07-24 07:14:18

您需要使用getComputedStyle。

.style屬性是一種訪問和設置內聯樣式（即樣式屬性）的方法。

但是請注意，您的示例與繼承無關。只是直接適用於您感興趣的元素的規則集。繼承是指元素通過inherit關鍵字採用與其父元素相同的樣式。

span { 
    color: inherit; 
}

getComputedStyle會給出最終的計算值，所以它也會選擇繼承的值。

來源

2009-07-23 06:34:45 Quentin

getComputedStyle（）在所有流行的瀏覽器中都不起作用（沒有命名） – 2009-07-23 06:43:16

您現在可以安全地使用'getComputedStyle' http://caniuse.com/#feat=getcomputedstyle – Ivan 2015-04-07 17:41:22

你需要看一下計算樣式，see here

來源

2009-07-23 06:34:04

你的第二個CSS規則：

.Sliding #FilterBox 
{ 
    height: 185px; 
    background-color: Fuchsia; 
}

將匹配ID爲「FilterBox」，即與一類「滑動體」的任何後代什麼，所以這條規則並不適用於您的股利。

而得到計算樣式，你可以參考法比安斯基的答案，或者考慮使用jQuery，這使得這個東西容易得多：使用jQuery，$（「＃FilterBox」）

CSS（」顯示「）將返回」顯示「的當前值。

來源

2009-07-23 06:36:36

-1公平的評論 - 但這不是回答。 – Quentin 2009-07-23 06:37:28

當然，但你可以指向他計算風格一百萬次，但如果CSS不正確，這是浪費時間 – 2009-07-23 06:39:15

由於第二條規則不觸及顯示屬性，所以它不會有任何影響，如果它是寫成適用於該元素。 – Quentin 2009-07-23 06:44:18

if (!window.getComputedStyle) 
{ 
    window.getComputedStyle = function(el, pseudo) 
    { 
     this.el = el; 
     this.getPropertyValue = function(prop) { 

     var re = /(\-([a-z]){1})/g; 
     if (prop == 'float') 
      prop = 'styleFloat'; 
     if (re.test(prop)) 
     { 
      prop = prop.replace(re, function() { 

      return arguments[2].toUpperCase(); 
      }); 
     } 

     return el.currentStyle[prop] ? el.currentStyle[prop] : null; 
     } 

     return this; 
    } 
} 

function GetCompStyle() 
{ 
    var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), ""); 
    alert(compStyle.getPropertyValue("display")); 
}

來源

2009-07-23 06:51:13 rahul

通過Javascript繼承CSS值

回答

相關問題