CSS Альтернативы style = "display: none"

Я реализую базу компонентов JSF, где вы должны переопределить используемый CSS, или он будет использовать свой CSS по умолчанию. Я пытаюсь скрыть div и я попытался установить rich-panelbar-header-act class style="display:none", но затем он извлекает его по умолчанию css. Есть ли способ добавить атрибут style в rich-panelbar-header-act (поскольку я должен реализовать класс), который скрывает div? Я включил мои CSS и HTML ниже

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>

Ответ 1

width: 0; height: 0;

или

visibility: hidden;

или

opacity: 0;

или

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

или просто

display: none !important;

Ответ 2

Я полагаю, visibility:hidden; поможет вам.:)

Ответ 3

Использовать! важно остановить его переопределение -

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

Ответ 4

Это работает для меня..

!important не может использоваться в версии amp, поэтому вместо display:none; используйте это:

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

Ответ 5

На этот вопрос уже дан ответ, хотя в первоначальном ответе есть несколько недостатков, которые я вижу... хотя они визуально убирают элемент с экрана, рекомендации по доступности в Интернете предлагают не использовать пару из них.

Чтобы дать более простой и лучший ответ, вариант visibilty: hidden; будет подходящим, хотя если вам нужно пространство, в котором этот элемент населяет, то display: none !important; будет вашим лучшим вариантом. Тег !important должен переопределять другие элементы CSS, которые действуют на этот <div>.

Как указывалось выше, простое визуальное перемещение элемента со страницы (например, position: absolute; top: -9999px; left: -9999px;) не считается наилучшей практикой в соответствии с рекомендациями по доступности веб-страниц, поскольку большинство читателей по-прежнему будут читать любой текст, содержащийся в элементе, и пользователи клавиатуры могут это сделать. перейти к этому элементу, даже если он находится "за пределами экрана".

Я обычно использую display: none !important, если у меня есть другие классы CSS, работающие с элементом, который мне нужно скрыть.