web-dev-qa-db-ja.com

style = "display：none"の代替CSS

私は、使用されているcssをオーバーライドする必要があるか、デフォルトのcssを使用するJSFコンポーネントベースを実装しています。私はdivを隠そうとしているのですが、rich-panelbar-header-act class style="display:none"を設定しようとしましたが、デフォルトのcssを取得しました。 （クラスを実装する必要があるため）divを非表示にするスタイル属性をrich-panelbar-header-actに追加する方法はありますか？以下に私の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>
htmlcssrichfaces
23
c12
width: 0; height: 0;

または

visibility: hidden;

または

opacity: 0;

または

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

あるいは単に

display: none !important;
45
Kaloyan

私は考えます visibility:hidden; 手伝います。 :)

4
FeRtoll

これは私のために働く。

!importantはampバージョンでは使用できないため、代わりにdisplay:none; これを使って：

position: absolute; top: -9999px; left: -9999px;
1
Shubham Mishra

！importantを使用して、上書きされないようにしてください-

.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>
1
Kevin Lynch

この質問にはすでに回答済みですが、元の回答にはいくつかの欠陥があります...要素が画面から視覚的に外れる間、Webアクセシビリティガイドラインではそれらのいくつかを使用しないことを推奨しています。

よりシンプルで適切な回答を提供するには、visibilty: hidden;がオプションになりますが、その要素が存在するスペースが必要な場合は、display: none !important;が最適なオプションです。タグ!importantは、その<div>に作用している他のCSS要素をオーバーライドする必要があります。

上記のように、要素をページから視覚的に移動するだけ（たとえば、position: absolute; top: -9999px; left: -9999px;）はmost e-readersが、要素、およびキーボードのユーザーは、「画面外」に配置されている場合でも、その要素に移動できる可能性があります。

非表示にする必要がある要素に作用する他のCSSクラスがある場合は、通常display: none !importantを使用します。

0
Kyle Ronsberg