Javascript 为什么 .style.display="block" 会改变我的表的长度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14995541/
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
Why does .style.display="block" change the length of my table?
提问by Wesley Smith
I have two tables that both have the same class and structure. I style the class with CSS and they look just like I want.
我有两个表，它们都具有相同的类和结构。我使用 CSS 为类设置样式，它们看起来就像我想要的一样。
The problem is that if one of those tables starts off hidden and is later displayed using JavaScript the outline ive given it shrinks to wherever the text is that it surrounds.
问题是，如果这些表格之一开始隐藏，然后使用 JavaScript 显示，则给定的轮廓会缩小到文本周围的任何位置。
this is the code used to display the table:
这是用于显示表格的代码：
function setTable(){
if(document.getElementById("forfeitTable2").style.display=="none"){
document.getElementById("forfeitTable2").style.display="block";
}
else if(document.getElementById("forfeitTable2").style.display=="block"){
document.getElementById("forfeitTable2").style.display="none";
}
}
This demo can probly explain it better than I can:
这个演示可能比我能更好地解释它：
http://jsfiddle.net/DelightedD0D/6Ajyn/1/
http://jsfiddle.net/DelightedD0D/6Ajyn/1/
- Why does this happen?
- What can I do to stop it?
- 为什么会发生这种情况？
- 我能做些什么来阻止它？
采纳答案by Ankit
can you try setting display to table instead of block!
您可以尝试将显示设置为表格而不是块吗！
回答by Aditya Singh
Use
用
document.getElementById("forfeitTable2").style.display="table";
instead of
代替
document.getElementById("forfeitTable2").style.display="block";
JS Fiddle :- http://jsfiddle.net/6Ajyn/3/
JS小提琴：- http://jsfiddle.net/6Ajyn/3/
回答by Aaron Lee
if you set display to none, width:100% doesnt noe how to measure the width.
如果您将 display 设置为 none，则 width:100% 不知道如何测量宽度。
try this:
尝试这个：
if(document.getElementById("forfeitTable2").style.display=="none"){
document.getElementById("forfeitTable2").style.display="block";
document.getElementById("forfeitTable2").style.width="100%";
}
else if(document.getElementById("forfeitTable2").style.display=="block"){
document.getElementById("forfeitTable2").style.display="none";
}
}
回答by Ahsan Khurshid
Just empty the css displayproperty instead of setting it as blockor tablelike this:
只需清空 cssdisplay属性，而不是将其设置为block或table像这样：
if(document.getElementById("forfeitTable2").style.display=="none"){
document.getElementById("forfeitTable2").style.display="";
}
else if(document.getElementById("forfeitTable2").style.display==""){
document.getElementById("forfeitTable2").style.display="none";
}
回答by Engin Aydogdu
To see a full list of possible values for the displayproperty see
style display property
要查看display属性的可能值的完整列表，请参阅
样式显示属性
When you hide a table to show it again use
当您隐藏表格以再次显示时使用
document.getElementById("tableId").style.display="table";
when you hide table row to show it again use
当您隐藏表格行以再次显示时使用
document.getElementById("rowId").style.display="table-row";
