原生js设置div隐藏或者显示_使用JavaScript显示/隐藏‘div’

最新推荐文章于 2023-03-18 22:20:11 发布

这个写手不太冷

最新推荐文章于 2023-03-18 22:20:11 发布

阅读量1.7k

点赞数

文章标签：原生js设置div隐藏或者显示

本文链接：https://blog.csdn.net/weixin_42523792/article/details/113552726

版权

如何显示或隐藏元素：

为了显示或隐藏元素，操作元素的风格属性..在大多数情况下，您可能只想更改元素的display财产:element.style.display = 'none'; // Hideelement.style.display = 'block';

// Showelement.style.display = 'inline'; // Showelement.style.display = 'inline-block'; // Show

或者，如果您仍然希望元素占用空间(比如要隐藏一个表单元格)，则可以更改元素的visibility财产相反：element.style.visibility = 'hidden'; // Hideelement.style.visibility = 'visible';

// Show

隐藏元素集合：

如果要隐藏元素集合，只需遍历每个元素并更改元素的display到none:function hide (elements) {

elements = elements.length ? elements : [elements];

for (var index = 0; index

elements[index].style.display = 'none';

}}// Usage:hide(document.querySelectorAll('.target'));hide(document.querySelector('.target'));hide(document.getElementById('target'));hide(document.querySelectorAll('.target'));function hide (elements) {

elements = elements.length ? elements : [elements];

for (var index = 0; index

elements[index].style.display = 'none';

}}

This div will be hidden.

This span will be hidden as well.

显示元素集合：

大多数时候，你可能只是在display: none和display: block，这意味着可以，可能显示元素集合时是否足够。

您可以选择指定所需的display作为第二个参数，如果您不希望它默认为block.function show (elements, specifiedDisplay) { elements = elements.length ? elements : [elements]; for (var index = 0; index

// The second param allows you to specify a display valuevar elements = document.querySelectorAll('.target');show(elements, 'inline-block');

// The second param allows you to specify a display valueshow(document.getElementById('hidden-input'));

function show (elements, specifiedDisplay) {

elements = elements.length ? elements : [elements];

for (var index = 0; index

elements[index].style.display = specifiedDisplay || 'block';

}}

This hidden div should have a display of 'inline-block' when it is shown.

Inline span..

或者，显示元素的一个更好的方法是仅仅删除内联。display样式，以便将其恢复到其初始状态。然后检查计算结果display元素的样式，以确定它是否被级联规则隐藏。如果是，则显示元素。function show (elements, specifiedDisplay) {

var computedDisplay, element, index;

elements = elements.length ? elements : [elements];

for (index = 0; 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

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';

}

}}Should revert back to being inline.

Inline as well.

Should revert back to being block level.

Should revert back to being inline.

(如果您想更进一步，您甚至可以模仿jQuery所做的事情，并通过将元素附加到空白中来确定元素的默认浏览器样式。iframe(没有冲突的样式表)，然后检索计算的样式。这样做，您将知道真正的首字母display元素的属性值，您将不必硬编码一个值以获得所需的结果。)

切换显示器：

类似地，如果您希望切换display元素或元素集合的元素，您可以简单地对每个元素进行迭代，并通过检查display财产。如果它是可见的，设置display到none，否则删除内联。display样式，如果它仍然隐藏，则设置display为指定的值或硬编码的默认值，block.function toggle (elements, specifiedDisplay) {

var element, index;

elements = elements.length ? elements : [elements];

for (index = 0; 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';