CSS style.display 不工作答案

【问题标题】：CSS style.display not workingCSS style.display 不工作
【发布时间】：2010-02-05 11:53:42
【问题描述】：

我有以下 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";

但表格行没有显示。知道这里可能是什么问题。提前致谢！

【问题讨论】：

会不会是你在 DOM 完全加载之前调用了这个函数？此外，虽然这不是问题，但您应该使用字符串而不是整数 (clock_Type("1");) 调用函数。
@Max — 似乎不太可能，它来自 onchange 事件。
@David：不清楚是否是这种情况：“...当我尝试从另一个函数调用 JS 函数clock_Type() 时...”。
@Max, David：感谢您调查此问题。我在函数调用中也尝试过字符串。但正如我提到的，执行到达 FF 中的以下代码行。 clockType.style.display = "table-row"; clockSource.style.display = "table-row";但是我在浏览器中看不到样式的变化。

标签： javascript html css

【解决方案1】：

将显示设置为空字符串，而不是指定“table-row”或“inline”。这将为元素提供默认显示，因此除非在样式表中指定display:none;，否则用户代理将协商正确的显示。

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

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

编辑：

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

【讨论】：

@Joel：感谢您的回答。让我给你更多关于我正在尝试做的事情的信息。我在页面上有一个选择框（时钟）以及其他表单元素。它具有值“启用”和“禁用”。当值为“启用”时，我必须显示两个表行（clockType 和clockSource），当值为“禁用”时，这些行应该被隐藏。正如我所提到的，这在时钟选择框的 onChange 上运行良好。但是当我尝试从另一个函数中调用 JS 函数clock_Type() 时，样式的变化并没有体现出来。
需要从另一个函数调用clock_Type() 是我需要用数据库中的值填充表单字段。因此，在填充时钟选择框后，我需要根据时钟值（即启用/禁用）隐藏/显示时钟类型和时钟源表行。
对不起，我误解了你的问题。

【解决方案2】：

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

【讨论】：

@Yaroslav：#clockType 和 #clockSource 元素没有 css 类。