ホームページ > 記事 > ウェブフロントエンド > jqueryで要素を非表示にする方法
jquery で要素を非表示にする方法: 1. HTML サンプル ファイルを作成する; 2. 要素に ID を設定する; 3. "$("#id").hide() を通じて要素を非表示にする「メソッド」それだけです。
この記事の動作環境: Windows7 システム、jquery バージョン 3.2.1、DELL G3 コンピューター
jquery で要素を非表示にする方法?
jquery を使用して要素の非表示と表示を制御するいくつかの方法:
組織は少し乱雑ですが、しばらくお待ちください。
jquery を使用して div の表示と非表示を制御します。これは 1 つの文で実行できます (例:
1.$("#id"))。 show() は、display: block、
$("#id").hide() として表現され、display:none;
2.$("#id") として表現されます。 toggle() は要素の状態の可視性を切り替えます。要素が表示されている場合は非表示に切り替え、要素が非表示の場合は表示に切り替えます。
3.$("#id").css('display','none');//非表示
$("#id").css('display', 'block');//
または
を表示 $("#id")[0].style.display='none';
Display=none コントロールオブジェクトの非表示検索
Display=block はオブジェクトの表示を制御します
4.$("#id").css('visibility','hidden');//要素の非表示
$("#id").css('visibility','visible');//要素の表示
CSS の可視性プロパティは、要素が表示されるかどうかを指定します。
visible 要素は表示されます。
hidden 要素は非表示になります。
collapse テーブル要素で使用すると、この値は行または列を削除できますが、テーブルのレイアウトには影響しません。行または列が占めていたスペースは、他のコンテンツのために解放されます。この値が別の要素で使用される場合、その値は「非表示」として表示されます。
inherit 親要素から可視性属性の値を継承します。
注:
display:none とvisible:hidden はどちらも Web ページ上の要素を非表示にできます。視覚効果に違いはありませんが、一部の DOM 操作ではこの 2 つに違いがあります。 :
display:none ---非表示オブジェクト用の物理スペースを予約しません。つまり、オブジェクトがページから完全に消えます。平たく言えば、見ることも触れることもできません。
visible:hidden--- オブジェクトは Web ページ上で非表示になりますが、Web ページ上でオブジェクトが占めるスペースは変更されていません。つまり、高さ、幅などの属性はそのままです。 . 平たく言えば、目に見えないが触れることができるということです。
//第1种方法 ,给元素设置style属性 $("#hidediv").css("display", "block"); //第2种方法 ,给元素换class,来实现隐藏div,前提是换的class样式定义好了隐藏属性 $("#hidediv").attr("class", "blockclass"); //第3种方法,通过jquery的css方法,设置div隐藏 $("#blockdiv").css("display", "none"); $("#hidediv").show();//显示div $("#blockdiv").hide();//隐藏div
推奨学習: 「jquery ビデオ チュートリアル 」
以上がjqueryで要素を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。