HTMLでdiv要素を非表示にする方法-htmlチュートリアル-php.cn

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

青灯夜游

リリース： 2023-01-05 16:13:16

オリジナル

37347 人が閲覧しました

htmldiv 要素を非表示にする方法: 1. div タグで hidden 属性を使用し、「hidden="hidden"」ステートメントを追加します。 2. div タグの style 属性を使用して、「display: none;」スタイルを追加します。

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

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

方法 1: hidden 属性を使用する

html hidden 属性は、要素が非表示であることを指定します。

この属性を使用すると、要素は非表示になり、非表示の要素は表示されません。

hidden 属性は、特定の条件 (チェックボックスをオンにするなど) が満たされた場合にのみユーザーが要素を表示できるように設定できます。その後、JavaScript を使用して非表示属性を削除し、要素を表示できるようになります。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div hidden="hidden">这是一段隐藏的段落。</div>
		<div>这是一段可见的段落。</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

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

##方法 2: 表示: なしスタイルを使用します

display 属性は、要素が生成するボックスのタイプを指定します。設定:

表示: なし; 非表示オブジェクト
表示: ブロック;例外変換ブロックレベルの要素に加えて、表示要素も意味します

手順:

使用

表示: なし;できません空間が占有され、要素が非表示になるため、この属性を動的に変更すると再配置 (ページレイアウトの変更) が発生し、ページ上の要素が削除されると理解できます。子孫には継承されませんが、その子孫は表示されません. 、結局のところ、それらはすべて一緒に隠されていました。

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="display: none;">这是一段隐藏的段落。</div>
		<div>这是一段可见的段落。</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

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