在CSS和JavaScript中使DIV不可见

时间:2023-01-17 15:08:05

I have managed to make a DIV tag invisible in JavaScript by setting the display to none and the visibility to hidden. It can be achieved with this class also:

我设法通过将显示设置为none并将隐藏可见性设置为在JavaScript中使DIV标签不可见。这个类也可以实现:

.invisible {
    display: none;
    visibility: hidden;
}

Display none will ensure the DIV box is empty, and visibility hidden will ensure it isn't visible. The problem with this method is when I have scrollable DIVs or textareas with overflowing content, when you set display: none, some browsers will forget the scroll position for these elements. Is there a better way to make a DIV invisible without using the display property? I would rather not resort to using JavaScript to record the scroll position and such if possible.

显示无将确保DIV框为空,隐藏可见性将确保它不可见。这个方法的问题是当我有可滚动的DIV或带有溢出内容的textareas时,当你设置display:none时,某些浏览器会忘记这些元素的滚动位置。有没有更好的方法在不使用display属性的情况下使DIV不可见?我宁愿不使用JavaScript来记录滚动位置,如果可能的话。

EDIT:

编辑:

I managed to solve it with your help, I applied the following:

我设法在你的帮助下解决了这个问题,我申请了以下内容:

.invisible {
    visibility: hidden;
    position: absolute;
    top: -9999px;
}

.visible {
    visibility: visible;
    position: static;
}

I tried left: -9999px, but this expands the vertical scrollbar in IE... I also wrapped my textarea in another DIV and applied the visible/invisible styles to that, because the textarea would lose its scroll position otherwise. I tested this in Chrome, Firefox, IE and Safari on my iPhone. Just a note, the DIV wrapped around the textarea didn't seem to help in FF, and the scrollbar still reset. But the scrollable DIVs are fine now. Thanks for your help!

我尝试了左:-9999px,但这扩展了IE中的垂直滚动条...我还将我的textarea包装在另一个DIV中并将可见/不可见的样式应用于此,因为textarea会失去其滚动位置。我在iPhone上的Chrome,Firefox,IE和Safari中进行了测试。只是一个注释,DIV缠绕textarea似乎没有帮助FF,滚动条仍然重置。但是可滚动的DIV现在很好。谢谢你的帮助!

6 个解决方案

#1


7  

This would probably work:

这可能会奏效:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: I would take a look at the common helpers in the HTML5 Boilerplate code to explore other ways of making things disappear.

编辑:我将看看HTML5 Boilerplate代码中的常见帮助程序,以探索使事情消失的其他方法。

#2


21  

You can just use visibility:hidden if you want the element to be invisible but still rendered. display:none will remove it entirely and cause the scroll behavior you mentioned.

如果您希望元素不可见但仍然呈现,则可以使用visibility:hidden。 display:none将完全删除它并导致您提到的滚动行为。

#3


4  

You can use a JQuery hide() method. $('#DivID').hide(); or $('.DivClass').hide();

您可以使用JQuery hide()方法。 $( '#DIVID')隐藏()。或$('。DivClass')。hide();

#4


3  

You can use jQuery to acheive the solution. If you want to totally hide/show the div, then u can use:

您可以使用jQuery来实现解决方案。如果你想完全隐藏/显示div,那么你可以使用:

$('#my_element').show()
$('#my_element').hide()

And if you want that your div become invisible and its still existing in the page, then you can use efficient trick:

如果你想让你的div变得不可见并且它仍然存在于页面中,那么你可以使用有效的技巧:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum

#5


2  

Layout-wise, display:none takes it completely out of the rendering tree and into this netherworld limbo. It has no well-defined dimensions or position anymore.

布局方面,显示:none完全将其从渲染树中移除并进入此netherworld边界。它没有明确定义的尺寸或位置。

If you need some placeholder for scroll position, I'd suggest using a placeholder element. Some zero-height DIV or maybe even an <a name="something""></a> would work.

如果您需要一些占位符用于滚动位置,我建议使用占位符元素。一些零高度DIV甚至可能是 都可以使用。

#6


1  

I rather use a fixed height and width (height:0; width:0;). Don't forget to eliminate borders, paddings and margins.

我宁愿使用固定的高度和宽度(高度:0;宽度:0;)。不要忘记消除边界,填充和边距。

#1


7  

This would probably work:

这可能会奏效:

.invisible {
    position: absolute;
    left: -9999px;
}

EDIT: I would take a look at the common helpers in the HTML5 Boilerplate code to explore other ways of making things disappear.

编辑:我将看看HTML5 Boilerplate代码中的常见帮助程序,以探索使事情消失的其他方法。

#2


21  

You can just use visibility:hidden if you want the element to be invisible but still rendered. display:none will remove it entirely and cause the scroll behavior you mentioned.

如果您希望元素不可见但仍然呈现,则可以使用visibility:hidden。 display:none将完全删除它并导致您提到的滚动行为。

#3


4  

You can use a JQuery hide() method. $('#DivID').hide(); or $('.DivClass').hide();

您可以使用JQuery hide()方法。 $( '#DIVID')隐藏()。或$('。DivClass')。hide();

#4


3  

You can use jQuery to acheive the solution. If you want to totally hide/show the div, then u can use:

您可以使用jQuery来实现解决方案。如果你想完全隐藏/显示div,那么你可以使用:

$('#my_element').show()
$('#my_element').hide()

And if you want that your div become invisible and its still existing in the page, then you can use efficient trick:

如果你想让你的div变得不可见并且它仍然存在于页面中,那么你可以使用有效的技巧:

$('#my_element').css('opacity', '0.0');  // invisible Maximum
$('#my_element').css('opacity', '1.0');  // visible maximum

#5


2  

Layout-wise, display:none takes it completely out of the rendering tree and into this netherworld limbo. It has no well-defined dimensions or position anymore.

布局方面,显示:none完全将其从渲染树中移除并进入此netherworld边界。它没有明确定义的尺寸或位置。

If you need some placeholder for scroll position, I'd suggest using a placeholder element. Some zero-height DIV or maybe even an <a name="something""></a> would work.

如果您需要一些占位符用于滚动位置,我建议使用占位符元素。一些零高度DIV甚至可能是 都可以使用。

#6


1  

I rather use a fixed height and width (height:0; width:0;). Don't forget to eliminate borders, paddings and margins.

我宁愿使用固定的高度和宽度(高度:0;宽度:0;)。不要忘记消除边界,填充和边距。