如何从JavaScript修改CSS显示属性？ [英] How to modify a CSS display property from JavaScript?

问题描述

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




这是我的HTML代码：

 < select type =textname =categoryonblur =display_hidden_​​fields（）;> 
< option><！ -  Content  - >< / option> 
< option><！ -  Content  - >< / option> 
< / select> 
 
< div id =hiddenstyle =display：none;> 
< label for =test>标签< / font>< / label> 
< select type =textname =test> 
< option value =1>默认< / option> 
< option value =2> Value1< / option> 
< option value =3> Value2< / option> 
< / select> 
< / div> 
  

（注意，这是我的代码的简化版本。标签> 和< select> 位于< td> 没关系）

现在，我的JS代码：

  function display_hidden_​​fields（）
 {
 alert（JS Function）; 
 document.getElementById（hidden）。style.display =block; 
} 
  

当我在第一个< select> 命名的类别中选择新的< option> 警报JS功能。所以我的 display_hidden_​​fields（）函数正确执行。

但是这个函数的第二行没有什么！我不会显示名为hidden的< div> ：

此外，我尝试了很多变体。

- 像在中指定 style =display：block ; div> 属性，并在JS中将其更改为none。

- 或者尝试使用其他属性，如inline，inline-block 。

- 或者使用visibility而不是display

- 或者在HTML中不指定任何属性。




任何人都可以帮助我？）

谢谢。

重要观察结果

发现了有趣的东西。看起来< div> 与 display：none; 与< tr& ; 和< td> 完全不起作用。这是我真正的代码：

 < tr> 
< div id =hiddenstyle =display：none;> 
< td class =depot_table_left> 
< label for =sexe> Sexe< / label> 
< / td> 
< td> 
< select type =textname =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> 标签，它工作正常。但我需要这个表...

解决方案

应该是
document.getElementById hidden）。style.display =block;
不是
document.getElementById [hidden]。style.display =block ;

---

p>

为什么在这里使用< div> 只需向表格元素添加一个ID，并向其添加隐藏样式。例如。 < td id =hiddenstyle =display：noneclass =depot_table_left>

I'm trying to change the display CSS property of a <div> tag when the user changes the value of a <select>.


Here is my HTML code :

<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>

(note that's a simplified version of my code. Actually, every <label> and <select> are in <td>. I think it doesn't matter)

Now, my JS code :

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

Well. When I select a new <option> in the first <select> named "category", I get the alert "JS Function". So my display_hidden_fields() function is correctly executed.
But the second line of this function does... nothing ! My <div> named "hidden" is not displayed :(

It seems to me there is nothing wrong in my code. Moreover, I tried many variants.
- Like specifying style="display:block" in the <div> properties, and changing it to "none" in the JS.
- Or trying to use other properties like "inline", "inline-block", ...
- Or using "visibility" instead of "display"
- Or not specifying any property at all in the HTML.


Does anyone can help me ? :)

Thanks.

[EDIT] Important observation

I think I found something interesting. It seems that a <div> with display:none; mixed with <tr> and <td> is completely nonfunctional. Here is my real code :

<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>

The content of the <div> is still displayed. And I can try to change it in any way in JS, it doesn't work. I also tried to remove the <table>, <tr> and <td> tags, and it works fine. But I need this table...

解决方案

It should be document.getElementById("hidden").style.display = "block"; not document.getElementById["hidden"].style.display = "block";

---

EDIT due to author edit:

Why are you using a <div> here? Just add an ID to the table element and add a hidden style to it. E.g. <td id="hidden" style="display:none" class="depot_table_left">

这篇关于如何从JavaScript修改CSS显示属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！