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>

这在listbox 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 = "";

这也消除了执行浏览器检查的需要，这不是一种好的做法。

修改

我之前误解了你的问题。但是，我测试了您的代码here，它似乎工作正常（在FF 3.5.3，Chrome 4，IE8中测试）。

Answer 2

#clockType和#clockSource元素是否具有设置显示样式的css类？在这种情况下，我试图将其删除并设置内联显示样式。

CSS style.display不起作用

2 个答案: