jqueryで複数の部分を非表示にする方法-フロントエンドQ&A-php.cn

jqueryで複数の部分を非表示にする方法

青灯夜游

リリース： 2022-06-10 14:57:47

オリジナル

1848 人が閲覧しました

jquery では、css() メソッドを使用して要素にオーバーフロースタイルを追加して、余分な部分を非表示にすることができます。構文は "$("指定された要素").css("overflow","hidden) です。 ");" 。 css() メソッドは、指定された要素に対して 1 つ以上のスタイル属性を設定できます。overflow 属性は、コンテンツが要素ボックスからはみ出した場合の処理方法を設定するために使用されます。属性値が "hidden" に設定されている場合、余分な部分 (オーバーフローコンテンツ) をトリミングして非表示にすることができます。

jqueryで複数の部分を非表示にする方法

このチュートリアルの動作環境: 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で複数の部分を非表示にする方法