如何显示或隐藏一个元素:
要显示或隐藏元素，请操作元素的style属性。在大多数情况下，你可能只是想改变元素的display属性:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
或者，如果你仍然希望元素占用空间(就像你要隐藏一个表格单元格一样)，你可以改变元素的可见性属性:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
隐藏元素的集合:
如果你想隐藏一个元素集合，只需遍历每个元素，并将元素的显示更改为none:
function hide (elements) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = 'none';
}
}
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
隐藏(document.querySelectorAll (' .target '));
函数隐藏(元素){
Elements =元素。长度呢?元素:[元素];
For (var index = 0;索引< elements.length;指数+ +){
(指数).style元素。Display = 'none';
｝
｝
<div class="target">这个div将被隐藏
<span class="target">这个span也将被隐藏
显示元素集合的:
大多数情况下，您可能只是在display: none和display: block之间切换，这意味着在显示元素集合时，以下代码可能就足够了。
如果您不希望它默认为阻塞，您可以选择指定所需的显示作为第二个参数。
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || 'block';
}
}
<div class="target" style="display: none">This hidden div should have a display of 'inline-block' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
另一种更好的显示元素的方法是仅仅删除内联显示样式，以便将其恢复到初始状态。然后检查元素的计算显示样式，以确定它是否被级联规则隐藏。如果是，则显示该元素。
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay) {
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') {
element.style.display = specifiedDisplay || 'block';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(如果想更进一步，甚至可以模仿jQuery，通过将元素附加到空白iframe(没有冲突的样式表)来确定元素的默认浏览器样式，然后检索计算出的样式。这样做，你将知道元素的真实初始显示属性值，你不必为了得到想要的结果而硬编码一个值。)
切换显示:
类似地，如果您想切换一个元素或元素集合的显示，您可以简单地遍历每个元素，并通过检查display属性的计算值来确定它是否可见。如果它是可见的，则将显示设置为none，否则删除内联显示样式，如果它仍然隐藏，则将显示设置为指定值或硬编码的默认值block。
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
// Usage:
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
document.getElementById('toggle-button').addEventListener('click', function () {
toggle(document.querySelectorAll('.target'));
});
function toggle (elements, specifiedDisplay) {
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++) {
element = elements[index];
if (isElementHidden(element)) {
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element)) {
element.style.display = specifiedDisplay || 'block';
}
} else {
element.style.display = 'none';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>
