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の詳細なインストールと使用
推薦する
Alpine Dockerイメージフォント問題解決操作
1. フォントを実行し、フォント フォルダーを開いて、使用するフォント ファイルを見つけます。 2....
MySQL ステートメントコメントの紹介
MySQL は次の 3 種類のコメントをサポートしています。 1. 行末の「#」文字から。 2. 「...
MySQL での replace と replace into の使い方の説明
MySQL の replace と replace into はどちらも頻繁に使用される関数です。r...
Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明
目次ブートストラップと関連コンテンツの紹介グリッドシステムネストされた列列オフセット列の並べ替えナビ...
MySQLデータベースにパスワードを入力した後にフラッシュバックする問題の解決策
パスワード入力後にMySQLデータベースがクラッシュする問題と解決策1 ケースの説明最近、基本的な機...
Mysqlデータテーブルでワームレプリケーションを使用する方法
簡単に言えば、MySQL ワーム レプリケーションは、クエリされたデータを指定されたデータ テーブル...
Divの境界と透明度に関する設定
フレーム：スタイル=”border-style:solid;border-width:5px;bor...
Docker コンテナ アプリケーションで避けるべき 10 の悪い習慣
コンテナが企業の IT インフラストラクチャに欠かせない要素となっていることは間違いありません。コン...
MySQL binlog_ignore_dbパラメータの具体的な使用法
序文：前の記事を読んだ後、binlog はデータベースで実行されたすべての DDL および DML ...
MySQL の重要なログファイルの包括的なインベントリ
目次導入ログ分類パラメータファイルエラーログファイル完全なログファイルスロークエリログバイナリログフ...
ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明
1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...
Vue のプロダクション環境と開発環境を切り替えてフィルターを使用する方法
目次1. 本番環境と開発環境を切り替える最初の方法: .envファイルを設定する2番目の方法2. フ...
Nodejs エラー処理プロセス記録
この記事では、接続エラー ECONNREFUSED を例に、Node.js がエラーを処理するプロセ...
Linux で pyenv をインストールする方法
前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...
自動行折り返し機能付き CSS Flex レイアウトのサンプル コード
フレックス コンテナーを作成するには、要素に display: flex プロパティを追加するだけで...