web-dev-qa-db-ja.com

同じページでJavaScriptを使用して<div>タグの可視性を変更する方法は？

私は単純なJavaScriptコードに取り組んでいます。

条件に基づいて、タグの可視性を非表示から可視に変更する必要があります。

JavaScriptを単独で使用する必要があります。 jQueryまたはAJAXはありません。任意のアイデアや提案をお願いします。

javascripthtmlcsscss3css-transitions
9
arunpandiyarajhen

visibility属性の使用：

id="yourID"でdivを表示します：

document.getElementById("yourID").style.visibility = "visible";

非表示にするには：

document.getElementById("main").style.visibility = "hidden";

display属性の使用：

公演：

document.getElementById("yourID").style.display= "block";

隠す：

document.getElementById("yourID").style.display= "none";
30
mornaner
<div id="contentDiv">
    This is the content .
</div>

javascriptを使用してid = "contentDiv"でdivの可視性を変更する場合は、次のようにします。

var eleDiv = document.getElementById("contentDiv");


    // based on condition you can change visibility
if(eleDiv.style.display == "block") {
        eleDiv.style.display = "none";
}
else {
    eleDiv .style.display = "block";
}

このコードがお役に立てば幸いです........

4
Hitesh Bavaliya

Jqueryで実行しないように求められましたが、次のように実行できます：$('.my_div_tag_id').css('visibility','hidden');

2
uutsav

Divを表示するときにこの関数を呼び出します。その条件をセグメント/ケースに記述します。

function showDiv() {
    document.getElementById('divId').style.display = 'block';   //  or 'inline'
}

あなたのフィードバックを教えてください。

1
2plus

表示：

var elem = document.getElementById("IdOfEl");
elem.style.display="block";

隠す：

var elem = document.getElementById("IdOfEl");
elem.style.display="none";
1
Anton Baksheiev

これを行う1つの方法は、JavaScriptで制御ロジックを作成し、ドキュメントの「script」タグに追加することです。次に、「div」要素を非表示/表示するロジックを適用します。

16ページの「最初のHTMLドキュメント」に基づいてサンプルHTMLドキュメントを作成しました（Musciano and Kennedy、2002）。上部近くの「body」タグ内に「div」タグが含まれています。 ShowAndHide関数は、「head」タグ内の「script」タグに含まれています。 ShowAndHideのアプリケーションは、末尾近くの「body」タグ内の他の「script」タグで見つけることができます。

HTMLの例は、PDF document " Show-and-Hide Control Logic：Inspired by Question at Stack Overflow "への添付ファイルとして見つけることができます。

参照

Musciano、C.およびKennedy、B.（2002）。 HTMLおよびXHTML：決定版ガイド、第5版。カリフォルニア州セバストポル：O’Reilly Media Inc.

0
John Frederick Chionglo