https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-document-body-property-which-is-convenient-for-dynamically-adding-values-and-processing-to-the-body-tag-with-javascript/
https://idea-hack.com/courses/6-convenient-events-to-detect-drag-and-drop-in-javascript/lessons/how-to-use-the-document-body-property-which-is-convenient-for-dynamically-adding-values-and-processing-to-the-body-tag-with-javascript/

JavaScriptでbodyタグに値や処理を動的に追加するのに便利なdocument.bodyプロパティの使い方

<body>要素を取得するdocument.bodyプロパティ

JavaScriptで<body>要素を取得するには、専用に用意されているdocument.bodyプロパティを利用します。

プロパティ

プロパティ意味返り値
document.bodybody要素を取得body要素
document.body

サンプルコード

サンプルコードとして、<body>タグ内に特定のclassを動的に追加するサンプルコードを紹介します。

具体的には、クラスの追加・削除の切り替えボタンを実装し、クラスの付与状態によって文字列の表示をコントロールするスクリプトです。

Output

下のボタンをクリックしてみてください。

body要素にclass名(targetAreaDispaly)がないと表示されないよ。
Pug
p 下のボタンをクリックしてみてください。
	#targetArea body要素にclass名(targetAreaDispaly)がないと表示されないよ。
	button#targetButton.my-4 Button
SCSS
#targetButton {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}

body #targetArea {
	display: none;
}

body.targetAreaDispaly #targetArea {
	display: block !important;
}
JavaScript
const targetButton =
  document.getElementById('targetButton');

// テーマ変更ボタンをクリックしたときの処理
targetButton.addEventListener('click', () => {
  // body要素のクラスを切り替える
  document.body.classList.toggle('targetAreaDispaly');
});

実際に<body>要素にクラス名が動的に追加されているかは開発者ツールで確認してください。

インストラクター
コメント

コメントを残す