ホームページ > 記事 > ウェブフロントエンド > jqueryで複数の部分を非表示にする方法
jqueryで複数の部分を非表示にする方法
- 青灯夜游オリジナル
- 2022-06-10 14:57:471796ブラウズ
jquery では、css() メソッドを使用して要素にオーバーフロー スタイルを追加して、余分な部分を非表示にすることができます。構文は "$("指定された要素").css("overflow","hidden) です。 ");" 。 css() メソッドは、指定された要素に対して 1 つ以上のスタイル属性を設定できます。overflow 属性は、コンテンツが要素ボックスからはみ出した場合の処理方法を設定するために使用されます。属性値が "hidden" に設定されている場合、余分な部分 (オーバーフローコンテンツ) をトリミングして非表示にすることができます。
このチュートリアルの動作環境: Windows7 システム、jquery3.6.0 バージョン、Dell G3 コンピューター。
jquery では、css() メソッドを通じて要素にオーバーフロー スタイルを追加して、余分な部分を非表示にすることができます。
css() メソッドは、一致した要素の 1 つ以上のスタイル属性を設定できます。このメソッドを使用して要素に overflow: hidden; スタイルを設定すると、余分な部分が非表示になります。
構文形式:
$("指定元素").css("overflow","hidden");overflow 属性は、コンテンツが要素ボックスからオーバーフローした場合に、対応する要素範囲へのスクロール バーの追加を制御できます。これは、コンテンツが要素ボックスからオーバーフローした場合の処理方法を設定するために使用されます。要素ボックスからはみ出します。
この属性の値を「hidden」に設定すると、余分な部分（オーバーフローコンテンツ）をトリミングして非表示にすることができます。
実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="./js/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("div").css("overflow","hidden");
});
});
</script>
<style>
div {
background-color: #eee;
width: 200px;
height: 100px;
border: 1px dotted black;
overflow: visible;
}
</style>
</head>
<body>
<div>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
<p>这里的文本内容会溢出元素框。</p>
</div>
<br><br><br><br><br>
<button>隐藏多个td元素</button>
</body>
</html>
[推奨学習: jQuery ビデオ チュートリアル 、web フロントエンド ビデオ ]
以上がjqueryで複数の部分を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。