能見度：隱藏無法正確在JavaScript

-1

在CSS，設置可見性屬性來隱藏一類，然後getElementsByClassName方法[I] .style.visibility，將無法識別類作爲隱藏檢測。能見度：隱藏無法正確在JavaScript

Example

的執行的onChange的第二次不CSS的實際改變之後。第一次onChange調用無法識別css設置爲visibility: hidden，其他應用「隱藏」屬性。

爲了證明這一點，當別人被替換否則如果，能見度會不會改變，因爲它不是讀成可見的或隱藏的

Fiddle -1

但是，如果我用style.visibility != "hidden" and style.visibility != "visible"的代碼將正常工作。

Fiddle -2

誰能開導我，爲什麼出現這種情況，和屬性如何，我可以適當地設置爲JS讀？

來源

2016-08-01 Torpid

'.style'隻影響內嵌樣式。你正在尋找['window.getComputedStyle（）']（https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle）。 – Siguza

此答案可能對您有所幫助。 http://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript/196038#196038 – colecmc

強烈建議您在問題中包含必要的代碼，而將其作爲外部資源鏈接到它。 – War10ck

element.style將僅返回內聯樣式，即元素的style="..."屬性中定義的樣式。
要獲取計算樣式，使用window.getComputedStyle(element)：

var inline = document.getElementById('inline'), 
 
    computed = document.getElementById('computed'), 
 
    derp = document.querySelector('.derp'); 
 
document.getElementById('getval').addEventListener('click', function() 
 
{ 
 
    inline.textContent = derp.style.visibility; 
 
    computed.textContent = getComputedStyle(derp).visibility; 
 
}) 
 
document.getElementById('toggle').addEventListener('click', function() 
 
{ 
 
    derp.style.visibility = getComputedStyle(derp).visibility == 'visible' ? 'hidden' : 'visible'; 
 
})

.derp 
 
{ 
 
    visibility: visible; 
 
    background: #CFC; 
 
    height: 50px; 
 
}

<div class="derp"></div> 
 
Inline value: <span id="inline"></span><br> 
 
Computed value: <span id="computed"></span><br> 
 
<button id="getval">Get visibility</button> <button id="toggle">Toggle div visibility</button>

來源

2016-08-01 22:00:26 Siguza

能見度：隱藏無法正確在JavaScript

回答

相關問題