爲什麼JavaScript didint看到ID可見性設置爲隱藏

您好我想我的頁面中的某些元素只在選中複選框時纔會出現，如果沒有，則會消失。爲什麼JavaScript didint看到ID可見性設置爲隱藏

所以我有這樣的HTML：

<td><input type="checkbox" onchange="test('f1')"> Is selected?</td> 
<div id="f1">some content</div>

和Javascript：

function test(id) { 
    if (document.getElementById(id).style.visibility === "hidden") { 
     document.getElementById(id).style.visibility = "visible"; 
    } else { 
     document.getElementById(id).style.visibility = "hidden"; 
    } 
}

和CSS：

#f1 {visibility: hidden;}

現在它是工作，但並不完美，因爲第一選擇總是隱藏着。

來源

2014-01-25 piotr

的[如何檢索在JavaScript風格的價值？]可能重複（http://stackoverflow.com/questions/2664045/how-to-retrieve-a-styles -value-in-javascript）和其他許多 – JJJ

好吧我現在明白了，它很難做到這一點與CSS文件:)可以關閉 – piotr

由於Juhana在評論中指出，這是在鏈路完全解釋你正在尋找的答案 - 是：.style.*只看inline元素，報價：

「的element.style屬性，可以只知道在該元素中內聯定義的CSS屬性（以編程方式或在元素的樣式屬性中定義），則應該獲得計算的樣式。「

如果你調整你的函數一點點地檢查是否有.style.visibility尚未設置（因此''），它會在第一次單擊切換它。

function changeVisiblity() { 
    if (getContent.style.visibility == "hidden" || getContent.style.visibility == '') { 
     getContent.style.visibility = "visible"; 
    } else { 
     getContent.style.visibility = "hidden";  
    } 
}

其次，嘗試教自己的HTML元素內onclick保持距離，因爲這使得它更難維持未來。

var getCheckbox = document.getElementById("testcheckbox"), 
    getContent = document.getElementById("f1"); 

getCheckbox.addEventListener('change', changeVisiblity, null);

Demo Fiddle:http://jsfiddle.net/4yfWD/

來源

2014-01-25 13:23:00 MackieeE

爲什麼JavaScript didint看到ID可見性設置爲隱藏

回答

相關問題