[英]How to modify a CSS display property from JavaScript?
I'm trying to change the display CSS property of a <div>
tag when the user changes the value of a <select>
. 我正在尝试在用户更改<select>
的值时更改<div>
标记的显示CSS属性。
Here is my HTML code : 这是我的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". 当我在第一个名为“category”的<select>
选择一个新的<option>
时,我收到警告“JS Function”。 So my display_hidden_fields()
function is correctly executed. 所以我的display_hidden_fields()
函数正确执行。
But the second line of this function does... nothing ! 但是这个功能的第二行确实......没有! My <div>
named "hidden" is not displayed :( 我的<div>
名为“hidden”未显示:(
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. - 比如在<div>
属性中指定style="display:block"
,并在JS中将其更改为“none”。
- 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. - 或者不在HTML中指定任何属性。
Does anyone can help me ? 有人能帮帮我吗? :) :)
Thanks. 谢谢。
I think I found something interesting. 我想我找到了一些有趣的东西。 It seems that a <div>
with display:none;
它似乎是一个带有display:none;
的<div>
display:none;
mixed with <tr>
and <td>
is completely nonfunctional. 与<tr>
和<td>
混合完全不起作用。 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. 仍会显示<div>
的内容。 And I can try to change it in any way in JS, it doesn't work. 我可以尝试在JS中以任何方式更改它,它不起作用。 I also tried to remove the <table>
, <tr>
and <td>
tags, and it works fine. 我还试图删除<table>
, <tr>
和<td>
标签,它工作正常。 But I need this table... 但我需要这张桌子......
It should be document.getElementById("hidden").style.display = "block";
它应该是document.getElementById("hidden").style.display = "block";
not document.getElementById["hidden"].style.display = "block";
不是document.getElementById["hidden"].style.display = "block";
EDIT due to author edit: 编辑由于作者编辑:
Why are you using a <div>
here? 你为什么在这里使用<div>
? Just add an ID to the table element and add a hidden style to it. 只需向表元素添加一个ID,并为其添加一个隐藏的样式。 Eg <td id="hidden" style="display:none" class="depot_table_left">
例如<td id="hidden" style="display:none" class="depot_table_left">
I found the solution. 我找到了解决方案。
As said in the EDIT of my answer, a <div>
is misfunctioning in a <table>
. 正如在我的回答的编辑中所说, <div>
在<table>
。 So I wrote this code instead : 所以我写了这段代码:
<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 ;) 谢谢大家 ;)
CSS properties should be set by cssText
property or setAttribute
method. 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 style
property (as in elt.style = "color: blue;"
), since it is considered read-only, as the style
attribute returns a CSSStyleDeclaration
object which is also read-only. 不应通过直接为style
属性指定字符串来设置style
(如elt.style = "color: blue;"
),因为它被认为是只读的,因为style
属性返回一个CSSStyleDeclaration
对象,该对象也是只要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.