JavaScript カラービューア
|
この記事では、カラービューアを実装するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 成果を達成する
実装コード
<!DOCTYPE html>
<html lang="ja">
<ヘッド>
<メタ文字セット="UTF-8" />
<title>カラービューア</title>
<スタイル>
＃色 {
幅: 150ピクセル;
高さ: 150px;
背景色: #fff;
境界線: 1px実線 #000;
}
</スタイル>
</head>
<本文>
<div id="color"></div>
<input id="inp" type="text" placeholder="カラーコードを入力してください..." />
<button id="trans">色を表示</button>
<button id="rst">復元</button>
</本文>
<スクリプト>
trans = document.getElementById('trans'); とします。
color = document.getElementById('color'); とします。
inp = document.getElementById('inp'); とします。
rst = document.getElementById('rst'); とします。
trans.addEventListener('クリック', () => {
color.style.backgroundColor = inp.value;
});
rst.addEventListener('クリック', () => {
color.style.backgroundColor = '#fff';
inp.value = '';
});
</スクリプト>
</html>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Ubuntu環境でのSSHの詳細なインストールと使用
推薦する
yum の基本的な使い方と例（推奨）
yumコマンドYum (フルネームは Yellow dog Updater, Modified) ...
MySQL 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...
NginxにLuaモジュールを追加する方法
luaをインストールする http://luajit.org/download/LuaJIT-2.0...
vue+springbootでログイン機能を実現
この記事の例では、ログイン機能を実現するためのvue+springbootの具体的なコードを参考まで...
地域のカスタムカラーのためのechars 3Dマップソリューション
目次質問伸ばす問題を解決する要約する質問プロジェクトの要件に従って、以下の州地図で個々の都市を（異な...
MyISAMとInnoDBの違いについてお話しましょう
主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...
Ubuntu環境でのPHP関連のパスと変更方法
Ubuntu環境におけるPHP関連パスPHP パス /usr/bin/php phpize5 /us...
Windows 10 に Ubuntu 20.04 デュアル システムをインストールする詳細なグラフィック チュートリアル
win10 + Ubuntu 20.04 LTS デュアルシステムインストール (UEFI + GP...
HTML テーブル_Powernode Java アカデミー
HTMLで表を描くには、表タグを使用します。 trは行を意味しますtdは列を示すth はテーブ...
JS 矢印関数に適さないシナリオは何ですか?
目次概要オブジェクトにメソッドを定義するオブジェクトリテラルオブジェクトプロトタイプ動的コンテキスト...
インターフェーステストプラットフォームを構築するためのDjango+Vue+Dockerの詳細な説明
1. 冒頭の2つの単語みなさんこんにちは。私の名前はLin Zonglinです。私はテストエンジニア...
この記事ではCSSの組み合わせセレクターの使い方を説明します
CSS 組み合わせセレクターには、単純なセレクターのさまざまな組み合わせが含まれます。 CSS3 に...
Ubuntu 20.04にROS Noeticをインストールする方法
免責事項：プロジェクトでは ROS 環境を使用する必要があるため、これは Ubuntu 20.04 ...
HTML の類似タグと属性の違いの詳細な説明
【1】<i></i>タグと<em></em>タグ同じ...
HTML要素を非表示にするいくつかの方法
1. CSSを使用するコードをコピーコードは次のとおりです。スタイル="display:n...