Html style="display:none" 的 CSS 替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15855826/
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
CSS Alternatives to style="display:none"
提问by c12
I'm implementing a JSF component base where you must override the css being used or it will use its default css. I'm trying trying to hide the divand I've tried to set the rich-panelbar-header-act class style="display:none", but then it pulls in its default css. Is there any way to add a style attribute to rich-panelbar-header-act(since I have to implement the class) that hides the div? I've included my css and html below
我正在实现一个 JSF 组件库，您必须在其中覆盖正在使用的 css，否则它将使用其默认 css。我试图隐藏div并且我已经尝试设置rich-panelbar-header-act class style="display:none"，但随后它拉入了它的默认 css。有什么方法可以将样式属性添加到rich-panelbar-header-act（因为我必须实现类）隐藏div? 我在下面包含了我的 css 和 html
CSS:
CSS：
element.style {
}
Matched CSS Rules
.rich-panelbar-header-act {
background-image: url(/spot-main-web/a4j/g/3_3_3.Finalorg.richfaces.renderkit.html.GradientA/DATB/eAGLj48PDQ1lBAAJswIe.html);
background-position: top left;
background-repeat: repeat-x;
vertical-align: middle;
color: #FFF;
background-color: #555;
font-size: 11px;
font-weight: bold;
font-family: Arial,Verdana,sans-serif;
}
.rich-panelbar-header-act {
border: 0 solid red;
padding: 0 1px 1px 5px;
cursor: pointer;
}
user agent stylesheetdiv {
display: block;
}
Inherited from body.browserChrome.browserChrome2
body {
font: 12px/17px Helvetica, Arial, Verdana;
}
HTML:
HTML：
<html version="XHTML 2.0" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<div class="rich-panelbar rich-panelbar-b " id="j_id95" style="padding: 0px; height: 400px; width: 500px; none">
<div class="rich-panelbar rich-panelbar-interior " id="j_id96" style="none"><div class="rich-panelbar-header " style=";">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-header-act " style=";;;;display: none;">Leverage the whole set of JSF benefits while working with AJAX</div><div class="rich-panelbar-content-exterior" style="display: none; width: 100%;"><table cellpadding="0" cellspacing="0" style="height: 100%;" width="100%"><tbody><tr><td class="rich-panelbar-content " style=";">
Ajax4jsf is fully integrated into the JSF lifecycle. While other frameworks only
give you access to the managed bean facility, Ajax4jsf advantages the action and value
change listeners as well as invokes server-side validators and converters during the
AJAX request-response cycle.</td></tr></tbody></table></div></div>
</div>
</body>
</html>
回答by Kaloyan
width: 0; height: 0;
or
或者
visibility: hidden;
or
或者
opacity: 0;
or
或者
position: absolute; top: -9999px; left: -9999px;
or just
要不就
display: none !important;
回答by FeRtoll
I suppose visibility:hidden;will help you. :)
我想visibility:hidden;会帮助你。:)
回答by Kevin Lynch
Use !important to stop it getting overridden -
使用 !important 阻止它被覆盖 -
.rich-panelbar-header-act {
display:none !important;
}
Also you can use JavaScript as a back up -
你也可以使用 JavaScript 作为备份 -
function hidediv() {
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById('DIVIDNAME').style.display = 'none';
}else {
if (document.layers) { // Netscape 4
document.DIVIDNAME.display = 'hidden';
}else { // IE 4
document.all.DIVIDNAME.style.display = 'none';
}}}
</script>
回答by Shubham Mishra
This works for me..
这对我有用..
!importantcan't be used in amp version so instead of display:none;use this:
!important不能在 amp 版本中使用，所以不要display:none;使用这个：
position: absolute; top: -9999px; left: -9999px;
回答by Kyle Ronsberg
This question has already been answered, though the original answer has a couple flaws that I see... while they get the element visually off the screen, web accessibility guidelines suggest not using a couple of them.
这个问题已经得到了回答，尽管我看到最初的答案有几个缺陷......虽然他们在视觉上将元素从屏幕上移开，但网络可访问性指南建议不要使用其中的几个。
To provide a simpler, better answer, visibilty: hidden;would be an option, though if you need the space that element was inhabiting, display: none !important;would be your best option. The tag !importantshould override other CSS elements that are acting on that <div>.
提供更简单、更好的答案visibilty: hidden;将是一种选择，但如果您需要该元素所在的空间，这display: none !important;将是您的最佳选择。该标签!important应该覆盖作用于该 的其他 CSS 元素<div>。
As stated above, simple moving the element visually off the page (e.g. position: absolute; top: -9999px; left: -9999px;) is not considered best practice per web accessibility guidelines as moste-readers will still read whatever text you have in the element, and keyboard users will potentially be able to navigate to that element, even though it is located 'off the screen'.
如上所述，简单直观的移动元素在页面（如position: absolute; top: -9999px; left: -9999px;）不考虑每个网络无障碍导最佳做法，大多数电子阅读器仍然会读取你在元素的任何文字，和键盘的用户将有可能能够浏览到该元素，即使它位于“屏幕外”。
I normally use display: none !importantif I have other CSS classes acting on an element that I need hidden.
display: none !important如果我有其他 CSS 类作用于我需要隐藏的元素，我通常会使用。
