BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

フロントエンドのhtmlスキニングコード

2022-01-07 06:58:43

透明を含む5つの肌色を変更する50行のコード

まず、コードが提示されているので、それを受け取って自分で使ってみてください。htmlファイルを直接作成し、直接貼り付ければ動きます、無理なら遠慮なく罵ってください。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#box{width: 100%;height:100%;background-color: red;position: absolute;top:0;left:0;right:0;bottom:0;}
	#box>div{float:right;width: 30px;height: 30px;margin:10px;border: 1px #333 solid;}
	#box1{background-color: red}
	#box2{background-color: yellow}
	#box3{background-color: blue}
	#box4{background-color: green}
	</style>
</head>
<body>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>
<script>
	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 = function(){
		box.style.backgroundColor = 'red';
	}
	box2.onclick = function(){
		box.style.backgroundColor = 'yellow';
	}
	box3.onclick = function(){
		box.style.backgroundColor = 'blue';
	}
	box4.onclick = function(){
		box.style.backgroundColor = 'green';
	}
	box5.onclick = function(){
		box.style.backgroundColor = 'transparent';
	}
</script>
</html>

コメント開始、コードが凝縮されているので、理解するのは難しくありません

htmlの基本的なタグは、この作品は言うことはありません、最初にそれをテキストスタイルの下にボディを言う 

<body>
	<div id="box">
		<div id="box1"></div>
		<div id="box2"></div>
		<div id="box3"></div>
		<div id="box4"></div>
		<div id="box5"></div>
	</div>
</body>

最後にJSを使いますが、ここでquot; id "という名前で書いておくと、後で書くコードが少なくて済みます。

大きな赤い箱が#boxで、デフォルトの色を付けました、そうでなければ透明です。
各ボックスにボーダーを追加し、ブロックとブロックの区別がつきやすいようにした

1枚目と4枚目には違いがあり、1枚目は透明、2枚目は赤、つまりベースカラーと同じ色であることが違いです。 

<style>
	#box{width: 400px;
	height: 400px;background-color: red;border: 1px #000 solid;}
	#box>div{float:right;width: 30px;
	height: 30px;margin:10px;border: 1px #333 solid;}
	#box1{background-color: red}
	#box2{background-color: yellow}
	#box3{background-color: blue}
	#box4{background-color: green}
	#box5{}
	</style>

このブロックは、CSSスタイルが

width: ボックスの幅を設定 height: ボックスの高さを設定 background-color: ボックスの背景色を設定 border: ボックスの枠を設定
/{br (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 boxs = box.SelectorAll('div');
ということで、一文ですべて選択されています 

box1.onclick = function(){
		box.style.backgroundColor = 'red';
	}

この文の意味は
操作するボックスを選択します

カウントダウンで最初に表示される、小さな赤い四角がそれです。

<ブロッククオート

はボックスにクリックイベント（onclick）を与え、function(){}は実行される関数です。

box1がonclickされると、boxはfunction(){}となる。

これでわかりやすくなったので、function(){}の中身をみてみましょう。


とてもシンプルに、たった一文で。
この文章は、ボックスの背景色を赤（レッド）にすることを意味しています。

style: スタイル、スタイル; backgroundColor: 背景色; （JSでは、" - "
は一般に正しく動作しないので、次の単語の頭文字を大文字に置き換えたものである。
背景色 ==> 背景色 );

最後です。 

box.style.backgroundColor = 'transparent';

p}のtransparentは背景色のデフォルト値で、このように書くと本来の透明な状態に戻すということになります。

要約

フロントエンドのhtmlスキニングコードについては、この記事がすべてです。もっと関連するフロントエンドのhtmlスキニングのコンテンツは、Script Houseの過去の記事を検索するか、下の関連記事を引き続きご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します