フロントエンドHTMLスキン変更機能の実装コード

透明を含む5つの肌の色を変更するには50行のコードが必要です

最初にコードをお渡ししますので、ご自身でお使いください。 HTMLファイルを作成して貼り付けるだけで使えます。気軽に使うことはできません。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル>
	#box{幅: 100%;高さ: 100%;背景色: 赤;位置: 絶対;上: 0;左: 0;右: 0;下: 0;}
	#box>div{float:right;幅: 30px;高さ: 30px;マージン:10px;境界線: 1px #333 solid;}
	#box1{背景色: 赤}
	#box2{背景色: 黄色}
	#box3{背景色: 青}
	#box4{背景色: 緑}
	</スタイル>
</head>
<本文>
	<div id="ボックス">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</本文>
<スクリプト>
	var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');
	box1.onclick = 関数(){
		box.style.backgroundColor = '赤';
	}
	box2.onclick = 関数(){
		box.style.backgroundColor = '黄色';
	}
	box3.onclick = 関数(){
		box.style.backgroundColor = '青';
	}
	box4.onclick = 関数(){
		box.style.backgroundColor = '緑';
	}
	box5.onclick = 関数(){
		box.style.backgroundColor = '透明';
	}
</スクリプト>
</html>

コードは凝縮されており、理解しやすいです。

基本的なHTMLタグについては話しません。まずは本文のテキストスタイルについて話しましょう。

<本文>
	<div id="ボックス">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</本文>

最後に、JS を使用します。ここで「id」で名前を付けると、後で記述するコードが少なくなります。

ここに画像の説明を挿入

この大きな赤いボックスは #box です。デフォルトの色を追加しました。色を追加しないと透明になります。
ブロックを区別しやすくするために、各ボックスに境界線を追加しました。

ここに画像の説明を挿入

1 番目と 4 番目には違いがあります。違いは、1 番目の色が透明であるのに対し、2 番目の色が基本色と同じ赤であることです。

<スタイル>
	#ボックス{幅: 400px;
	高さ: 400px;背景色: 赤;境界線: 1px #000 実線;}
	#box>div{float:right;幅: 30px;
	高さ: 30px;余白: 10px;境界線: 1px #333 solid;}
	#box1{背景色: 赤}
	#box2{背景色: 黄色}
	#box3{背景色: 青}
	#box4{背景色: 緑}
	#ボックス5{}
	</スタイル>

これは CSS スタイルです。

width: ボックスの幅を設定します。height: ボックスの高さを設定します。background-color: ボックスの背景色を設定します。border: ボックスの境界線を設定します。
(1px は境界線の太さ、#333 は 16 進数の色、solid は境界線のスタイル、solid は実線を表します); float: 浮動です
（箱の底は水で満たされており、箱は浮いています。左は左に浮くことを意味し、右は右に浮くことを意味します）; margin: は外側の余白です
(箱は押しつぶされるのを好まないので、押しつぶされないように、箱の上、下、左、右からある程度の隙間を設けます);

赤は赤、黄色は黄色、青は青、緑は緑

var box = document.getElementById('box');
	var box1 = document.getElementById('box1');
	var box2 = document.getElementById('box2');
	var box3 = document.getElementById('box3');
	var box4 = document.getElementById('box4');
	var box5 = document.getElementById('box5');

これは、理解しやすくするために各ボックスを個別に選択する DOM セレクターです。すべてのボックスにチェックを入れたい場合は、
var ボックス = box.SelectorAll('div');
この文はすべてを選択します

box1.onclick = 関数(){
		box.style.backgroundColor = '赤';
	}

この文の意味は次のとおりです。
操作したいボックスを選択してください

ここに画像の説明を挿入

それは最後の小さな赤い四角です。

ボックスにクリックイベント (onclick) が指定され、function(){} は実行される関数です。

box1がクリックされると、boxはfunction(){}を実行します。

これは簡単に理解できるので、function(){}の内部を見てみましょう。

ここに画像の説明を挿入
とても簡単です。この一文だけです。
この文は、ボックスの背景色を赤に変更することを意味します。

style: スタイル、スタイル; backgroundColor: 背景色; (JS では、「 - 」
通常、正常に使用できないため、次の単語の最初の文字を大文字にして置き換えます。つまり、次のようになります。
背景色 ==> backgroundColor );

ファイナル：

box.style.backgroundColor = '透明';

ここでの透明は背景色のデフォルト値です。このように記述すると、元の見た目である透明に戻すという意味になります。

要約する

フロントエンド HTML スキン変更機能の実装コードに関するこの記事はこれで終わりです。フロントエンド HTML スキン変更に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: CSS 位置固定左と右の二重配置実装コード

>>: Web 上の要素を非表示にする方法とその利点と欠点