如何从 JavaScript 修改 CSS 显示属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4838351/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to modify a CSS display property from JavaScript?
提问by Pierre Espenan
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 :
<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>
(note that's a simplified version of my code. Actually, every <label>and <select>are in <td>. I think it doesn't matter)
（请注意，这是我的代码的简化版本。实际上，每个<label>和<select>都在 中<td>。我认为这无关紧要）
Now, my JS code :
现在，我的 JS 代码：
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 :(
好。当我<option>在第一个<select>命名的“类别”中选择一个新的时，我收到警报“JS 函数”。所以我的display_hidden_fields()功能被正确执行。
但是这个函数的第二行……什么都没有！我<div>命名的“隐藏”没有显示:(
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 ? :)
在我看来，我的代码没有任何问题。此外，我尝试了许多变体。
- 就像style="display:block"在<div>属性中指定，并在 JS 中将其更改为“无”。
- 或尝试使用其他属性，如“内联”、“内联块”、...
- 或使用“可见性”而不是“显示”
- 或在 HTML 中根本不指定任何属性。
有没有人可以帮助我？:)
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 :
我想我发现了一些有趣的东西。似乎 a <div>withdisplay:none;混合 with<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>
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...
的内容<div>仍然显示。我可以尝试在 JS 中以任何方式更改它，它不起作用。我还尝试删除<table>,<tr>和<td>标签，并且效果很好。但我需要这张桌子...
回答by Prisoner
It should be
document.getElementById("hidden").style.display = "block";not
document.getElementById["hidden"].style.display = "block";
应该
document.getElementById("hidden").style.display = "block";不是
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">
你为什么在这里使用a <div>？只需为 table 元素添加一个 ID 并为其添加隐藏样式即可。例如<td id="hidden" style="display:none" class="depot_table_left">
回答by Pierre Espenan
I found the solution.
我找到了解决方案。
As said in the EDIT of my answer, a <div>is misfunctioning in a <table>.
So I wrote this code instead :
正如我在回答的编辑中所说， a<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>
And this is working fine.
这工作正常。
Thanks everybody ;)
谢谢大家 ;）
回答by Andrej Gajdos
CSS properties should be set by cssTextproperty or setAttributemethod.
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;");
Styles should not be set by assigning a string directly to the styleproperty (as in elt.style = "color: blue;"), since it is considered read-only, as the styleattribute returns a CSSStyleDeclarationobject which is also read-only.
不应通过将字符串直接分配给style属性（如elt.style = "color: blue;"）来设置样式，因为它被视为只读，因为该style属性返回一个CSSStyleDeclaration也是只读的对象。
