Question

当用户更改<div>的值时，我正在尝试更改<select>标记的显示CSS属性。

这是我的HTML代码：

<select type="text" name="category" onblur="display_hidden_fields();">
    <option><!-- Content --></option>
    <option><!-- Content --></option>
</select>

<div id="hidden" style="display:none;">
    <label for="test">Label</font></label>
    <select type="text" name="test">
        <option value="1">Default</option>
        <option value="2">Value1</option>
        <option value="3">Value2</option>
    </select>
</div>

（请注意，这是我的代码的简化版本。实际上，每个<label>和<select>都在<td>。我认为无关紧要）

现在，我的JS代码：

function display_hidden_fields()
{
    alert("JS Function");
    document.getElementById("hidden").style.display = "block";
}

好。当我在第一个<option>命名的“类别”中选择一个新的<select>时，我会收到警告“JS Function”。所以我的display_hidden_fields()功能正确执行但是这个功能的第二行确实......没有！我的<div>名为“hidden”未显示：（

在我看来，我的代码没有任何问题。此外，我尝试了很多变种 - 比如在style="display:block"属性中指定<div>，并在JS中将其更改为“none” - 或尝试使用其他属性，如“内联”，“内联块”，...
- 或使用“可见性”而不是“显示”
- 或者在HTML中根本不指定任何属性

有人能帮帮我吗？：）

感谢。

[编辑]重要观察

我想我找到了一些有趣的东西。似乎<div> display:none;与<tr>和<td>混合在一起是完全无效的。这是我的真实代码：

<tr>
    <div id="hidden" style="display:none;">
        <td class="depot_table_left">
            <label for="sexe">Sexe</label>
        </td>
        <td>
            <select type="text" name="sexe">
                <option value="1">Sexe</option>
                <option value="2">Joueur</option>
                <option value="3">Joueuse</option>
            </select>
        </td>
    </div>
</tr>

仍会显示<div>的内容。我可以尝试在JS中以任何方式更改它，它不起作用。我还尝试删除了<table>，<tr>和<td>代码，它运行正常。但我需要这张桌子......

Answer 1

应该是 document.getElementById("hidden").style.display = "block"; 不 document.getElementById["hidden"].style.display = "block";

由于作者编辑而编辑：

为什么在这里使用<div>？只需向表元素添加一个ID，并为其添加一个隐藏的样式。例如。 <td id="hidden" style="display:none" class="depot_table_left">

Answer 2

我找到了解决方案。

正如我在回答的编辑中所说，<div>中<table>发生了误操作。所以我写了这段代码：

<tr id="hidden" style="display:none;">
    <td class="depot_table_left">
        <label for="sexe">Sexe</label>
    </td>
    <td>
        <select type="text" name="sexe">
            <option value="1">Sexe</option>
            <option value="2">Joueur</option>
            <option value="3">Joueuse</option>
        </select>
    </td>
</tr>

这很好。

谢谢大家;）

Answer 3

CSS属性应通过cssText属性或setAttribute方法设置。

// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black"; 
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");

不应通过直接将字符串分配给style属性（如elt.style = "color: blue;"）来设置样式，因为它被认为是只读的，因为style属性返回{ {1}}对象也是只读的。

如何从JavaScript修改CSS显示属性？

[编辑]重要观察

3 个答案: