CSS替代style =「display：none」

我正在實現一個JSF組件庫，您必須重寫正在使用的css或它將使用其默認css。我試圖隱藏試圖隱藏div，我試圖設置富 - 面板欄標題 - 行爲類風格=「顯示：無」，但然後它拉入其默認的CSS。有什麼辦法可以將style屬性添加到隱藏div的rich-panelbar-header-act（因爲我必須實現該類）嗎？我包括我的CSS和HTML貝羅CSS替代style =「display：none」

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

來源

2013-04-06 c12

請只發布CSS代碼。我不明白爲什麼顯示：沒有不工作。使用更具體的選擇器？ – 2013-04-06 20:49:46

@ExplosionPills posted css/html – c12 2013-04-06 20:55:03

width: 0; height: 0;

或

visibility: hidden;

或

opacity: 0;

或

position: absolute; top: -9999px; left: -9999px;

或只是

！3210

來源

2013-04-06 20:48:25 Kaloyan

關於可訪問性的注意事項：屏幕閱讀器將忽略隱藏着「display：none」和「visibility：hidden」的元素（這是意圖很好），但仍讀出位於視口外的元素文本縮進或左/右翻譯）。我認爲一個屏幕閱讀器（它是VoiceOver？）會忽略「height：0」的元素，但其他人不會。因此，請注意，有些用戶仍然會認爲自己隱藏的內容（並非如此）。 *位於視口之外*通常在CSS框架和CMS模板中稱爲「.visually-hidden」來表達這一點。 – FelipeAls 2013-04-06 21:31:09

相關：不要使用'top：-9999px'，因爲它可能導致視覺跳轉到頁面頂部並返回到以前的位置，以供使用鍵盤在內容中導航的用戶使用。 'left：-9999px'（或者在RTL語言中是正確的）很好，因爲它不會垂直移動滾動位置並且足夠了。這涉及到可聚焦的元素（鏈接，本質上是表單元素），但由於左側的屬性已經足夠，所以最好完全避免頂部 – FelipeAls 2013-04-06 21:36:08

幾年之後，這似乎也是一個有趣的選擇：'line-height：0;溢出：隱藏;填充：0;保證金：0' – 2016-12-13 14:00:43

我想visibility:hidden;會幫助你。 :)

來源

2013-04-06 20:48:12 FeRtoll

使用重要的是要阻止它得到覆蓋 -

.rich-panelbar-header-act { 
    display:none !important; 
}

您也可以使用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>

來源

2013-04-06 20:48:28 Vector

這對我的作品..

!important可以」 t用於放大器版本，因此而不是display:none;使用此：

position: absolute; top: -9999px; left: -9999px;

來源

2017-06-28 10:27:45

CSS替代style =「display：none」

回答

相關問題