jqueryを使ってdivの高さを変更する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

jqueryを使ってdivの高さを変更する方法

青灯夜游

May 17, 2022 pm 07:01 PM

jquery

3 つの方法: 1. "$("div").height(height)" を使用して新しい高さの値を設定します; 2. "$("div").css("height" ," を使用します) height value")"、新しい高さスタイルを追加します。 3. "$("div").attr("style","height:value")" を使用します。

jqueryを使ってdivの高さを変更する方法

このチュートリアルの動作環境: Windows7 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

#jquery で要素の高さを変更するには、さまざまな方法があります:

height()
css()
attr()

1. height() を使用して div の高さを変更します

height() メソッドは、一致する要素の高さを設定できます。構文:

$("div").height(高度值)

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("#but1").click(function() {
					$("div").height("30px");
				});
				$("#but2").click(function() {
					$("div").height("100px");
				});
			});
		</script>
		<style>
			div{
				height: 60px;
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>

		<div>
			一个div元素，高度60px
		</div>
		<br>
		<button id="but1">减小div高度</button>
		<button id="but2">增大div高度</button>
	</body>
</html>

jqueryを使ってdivの高さを変更する方法

2. css() を使用して div の高さを変更します

css () を使用して td 要素に高さのスタイルを追加します。構文:

$("div").css("height","高度值");

例: 方法 1 の例に基づいて

$(document).ready(function() {
	$("button").click(function() {
		$("div").css("height","40px");
	});
});

jqueryを使ってdivの高さを変更する方法

3 を変更します。 3. attr() を使用して div height を変更します

attr() を使用して style 属性値を制御し、高さのスタイルを td 要素に追加します。文法:

$("div").attr("style","height:高度值")

例: メソッド 1 の例に基づいて

$(document).ready(function() {
	$("button").click(function() {
		$("div").attr("style","height:100px")
	});
});

jqueryを使ってdivの高さを変更する方法

を変更 [推奨学習: jQuery ビデオチュートリアル、ウェブフロントエンドビデオ]

以上がjqueryを使ってdivの高さを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

CSS：同じDOMで複数のIDを使用できますか？May 14, 2025 am 12:20 AM

いいえ、あなたはusemultipleidsinthemedom.1）idsmustbeuniqueperhtmlspecification、およびusingdusing cansistent browserbehavior.2）useclassesses forstylingmultipleElements、acturtorectorectorectorsectorgettributeurutuureのuseclasses forstyling forstyling forstyling forstyling forstyling forstyling rassess for -destendertantertorectorsutortortortruture

HTML5の目的：より強力でアクセス可能なWebを作成するMay 14, 2025 am 12:18 AM

html5aimstoenhancewebcapability、makingmoredynamic、interactive、およびaccessible.1）itupportsmultimediaelementslikeand、排除、2）semanticelementionmentionmentionmentionimementsimementionimementsimementsimbrovecessibilityandcodereadability.3）

HTML5の重要な目標：Web開発とユーザーエクスペリエンスの向上May 14, 2025 am 12:18 AM

html5aimstoenhancewebdevelymentanduserexperiencetheTheTheTheTheTheTheTheTheTructure、multimedieingegration、およびperformanceImprovements.1）semanticelementslike like like ,, and and requrovedababilityandaccessibility.2）andTagsallowseamlessmultimediaemdiding withoutplugins.3）

HTML5：安全ですか？May 14, 2025 am 12:15 AM

html5isnotinherecureを使用しますが、featurescanleadtosecurityrisksifmisusedorimpremented.1）usetheSsandboxattribution controlembeddeddeddeddedentandPreventvulnerabilitieslikeclickjacking.2）

HTML5は、古いHTMLバージョンと比較して目標を達成しますMay 14, 2025 am 12:14 AM

html5aimedtoeenhancewebdevelopmentbyintroducingsmanticelements、nativemultimediasupport、改善、およびオフリンの実行可能性、対照、html.1）itintroductuedsemantictagslike、nattructurcturcurean desieand.2）

CSS：IDセレクターを使用するのは悪いですか？May 13, 2025 am 12:14 AM

IDセレクターを使用することは、CSSでは本質的に悪くはありませんが、注意して使用する必要があります。 1）IDセレクターは、一意の要素またはJavaScriptフックに適しています。 2）一般的なスタイルの場合、クラスセレクターはより柔軟で保守可能であるため、使用する必要があります。 IDとクラスの使用のバランスをとることにより、より堅牢で効率的なCSSアーキテクチャを実装できます。

HTML5：2024年の目標May 13, 2025 am 12:13 AM

HTML5'SGOALSIN2024FOCUSONREFINIMINGANDOPTIMIZATION、notnewfeatures.1）強化された拡張性と拡張効率化されたレンダリング.2）

HTML5が改善しようとした主な領域は何ですか？May 13, 2025 am 12:12 AM

html5aimed toemprovewebdevelymentinfourkeyareas：1）multimediasupport、2）セマンティクス構造、3）フォームキャピリティ、および4）offlineandstorageoptions.1）html5introduededelements、simplifiedediaembedingemencemanteddim.2）

See all articles