Javascript 显示 = 'block'
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9161419/
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
Javascript display = 'block'
提问by Homer_J
I have some code that shows a tables row when something is clicked. So, the row has it's style attribute disabled, see below:
我有一些代码可以在单击某些内容时显示表格行。因此，该行的样式属性已禁用，请参见下文：
HTML
HTML
<tr id='Asset' class='rrtr' style='display:none;'>
The user clicks and fires the Javascript, which works fine:
用户点击并触发 Javascript，它工作正常：
Javascript
Javascript
document.getElementById("Asset").style.display = 'block';
However, the style of the row isn't in line with rest even though it's class attributes are set to 'rrtr' like the rest.
然而，即使它的类属性设置为“rrtr”，该行的样式也不符合 rest。
If I turn off 'display:none;' on the row and run it showing, the format is fine.
如果我关闭“显示：无；” 在行上运行它显示，格式很好。
Any ideas?
有任何想法吗？
回答by Andy E
For best compatibility, set
为获得最佳兼容性，请设置
document.getElementById("Asset").style.display = '';
Internet Explorer 7 and lower do not support table-rowas a value for display. Alternatively– and, arguably, a better idea is to – set a class for the row and remove/change it using JS:
Internet Explorer 7 及更低版本不支持table-row作为display. 或者——可以说，更好的主意是——为行设置一个类并使用 JS 删除/更改它：
<tr id='Asset' class='rrtr rrtr-hidden'>
<!-- .rrtr-hidden { display: none; } -->
// Remove class `.rrtr-hidden`
document.getElementById("Asset").className = 'rrtr';
回答by Nate B
Instead of block, you should set the display value to table-row.
而不是block，您应该将显示值设置为table-row。
回答by wheresrhys
set it to table-rowor to ""
将其设置为table-row或""
回答by Brian McFarland
I hide and show table rows by adding/removing a class name called 'hide'. This approach has the advantage of being able to hide/show any element without knowing or caring what its normal display style is. With table rows, that's probably a non-issue, but with other elements, you may one day wish to change from blockto inlinefor example. If you use a class to hide elements, you don't have to change your javascript.
我通过添加/删除名为“隐藏”的类名来隐藏和显示表行。这种方法的优点是能够隐藏/显示任何元素，而无需知道或关心其正常显示样式是什么。与表行，这可能是个问题，但与其他元素，你可能有一天要改变从block到inline的例子。如果您使用类来隐藏元素，则不必更改您的 javascript。
In your CSS:
在你的 CSS 中：
.hide {
display:none;
}
And in javascript,
在 JavaScript 中，
function hasClass(ele, cls) {
if( ele != null && ele.className != null ) {
return ele.className.match(new RegExp('(\s|^)' + cls + '(\s|$)'));
} else {
return false;
}
}
function addClass(ele, cls) {
if (! hasClass(ele, cls)) {
ele.className += " " + cls;
}
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\s|^)' + cls + '(\s|$)');
ele.className = ele.className.replace(reg, '');
}
}
That JS came from someone else on SO, but unfortunately I forgot to save a link.
那个 JS 来自 SO 上的其他人，但不幸的是我忘记保存链接。
So to hide an element addClass( document.getElementById('Asset'), 'hide' )and removeClassto show it.
所以隐藏一个元素addClass( document.getElementById('Asset'), 'hide' )并removeClass显示它。
EDIT: I missed Andy's answer somehow. It does essentially the same thing, however, these addClass & removeClass methods are a little more robust than modifying element.className "manually".
编辑：我以某种方式错过了安迪的回答。它基本上做同样的事情，但是，这些 addClass 和 removeClass 方法比“手动”修改 element.className 更健壮一些。
