Question

在 CSS 中，为类设置隐藏的可见性属性，然后getElementsByClassName [i] .style.visibility，不会将该类识别为隐藏即可。

Example

只有在onChange第二次执行后，css才会实际发生变化。第一个onChange调用无法识别css设置为visibility: hidden，而else应用＆＃34;隐藏＆＃34;属性。

为证明这一点，当else替换为else if时，可见性永远不会改变，因为它不会被视为可见或隐藏

Fiddle -1

但是，如果我使用style.visibility != "hidden" and style.visibility != "visible"，代码将正常运行。

Fiddle -2

任何人都可以告诉我为什么会发生这种情况，以及如何正确设置js读取的属性？

Answer 1

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>

可见性：隐藏在javascript中未正确检测到

1 个答案: