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

Question

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


这是我的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功能".所以我的display_hidden_fields()功能正确执行.
但是这个功能的第二行确实......没有!我的<div>名字"隐藏"没有显示:(

在我看来,我的代码没有任何问题.而且,我尝试了很多变种.
- 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">