CSS style.display無法正常工作

Question

我具有以下JavaScript函數，用於基於列表框選擇顯示/隱藏表行。

function clock_Type(id) {
    var clockSource = document.getElementById("clockSource");
    var clockType = document.getElementById("clockType");

    if(id == "1") {
        if(navigator.appName == "Microsoft Internet Explorer") {
            clockType.style.display = "inline";
            clockSource.style.display = "inline";
        } else {
            clockType.style.display = "table-row";
            clockSource.style.display = "table-row";
        }
    } else {
        clockType.style.display = "none";
        clockSource.style.display = "none";
    }
}

以下是列表框。

<select id="clck" name="clock" class="selectStyle" style="width: 155px;" onchange="clock_Type(this.value)">
    <option value="0">Disabled</option>
    <option value="1">Enabled</option>
</select>

這在列表框onchange事件上運行良好。 即表行被隱藏並顯示。 但是，當我嘗試從另一個函數調用JS函數clock_Type（）時，如下所示，該表行未得到顯示。

function foo() {
   clock_Type(1);
}

當我跟蹤代碼時，執行到達FireFox的以下部分

clockType.style.display = "table-row";
clockSource.style.display = "table-row";

但是表格行未顯示。 任何想法可能是這里的問題。 提前致謝！

Answer 1

將顯示設置為空字符串，而不是指定“ table-row”或“ inline”。 這將為元素提供默認顯示，因此，除非指定了它們，否則display:none; 在樣式表中，用戶代理將協商正確的顯示。

clockType.style.display = "";
clockSource.style.display = "";

這也消除了執行瀏覽器檢查的必要，這不是一個好習慣。

編輯：

我以前誤會了你的問題。 但是，我在這里測試了您的代碼，它似乎可以正常工作（在FF 3.5.3，Chrome 4，IE8中測試）。

Answer 2

#clockType和#clockSource元素是否具有設置顯示樣式的CSS類？ 在這種情況下，我嘗試將其刪除並設置內聯顯示樣式。