ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryで要素を非表示にする方法

jqueryで要素を非表示にする方法

藏色散人
リリース: 2021-11-15 11:04:58
オリジナル
8046 人が閲覧しました

jquery で要素を非表示にする方法: 1. HTML サンプル ファイルを作成する; 2. 要素に ID を設定する; 3. "$("#id").hide() を通じて要素を非表示にする「メソッド」それだけです。

jqueryで要素を非表示にする方法

この記事の動作環境: 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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート