js_javascript スキルを使用して Web ページの背景色とフォント色を取得および変更する方法
この記事の例では、js を使用して Web ページの背景色とフォント色を取得および変更する方法を説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
Web ページの背景色とフォントの色を取得する方法は次のとおりです。
考え: color 属性値を取得することで得られるのは RGB カラーですが、これは私たちが望んでいる色ではないので、まず RGB カラーを 16 進数のカラーに変更する必要があります:
コードは次のとおりです:
取得された形式は次のとおりです: rgb(225, 22, 23) そして分割されます: ;
コードは次のとおりです:
次に、(225,22,23) 文字列を分割します (注: 変換できるのは数値型のみなので、型を強制的に変換するには parseInt を使用してください!):
コードは次のとおりです:
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据
}
最終的な組み合わせ:
コードは次のとおりです:
完全なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<title>getHexColor js/jQuery 获得十六进制颜色</title>
<meta charset="utf-8" />
<script type="text/javascript">
function getHexBgColor(){
var str = [];
var rgb = document.getElementById('color').style.backgroundColor.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
function getHexColor(){
var str = [];
var rgb = document.getElementById('color').style.color.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
</script>
<style type="text/css">
#color{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
<input onclick="getHexBgColor();" type="button" value="获得背景色" />
<input onclick="getHexColor();" type="button" value="获得字体颜色" />
</body>
</html>
JavaScriptを使用して背景色を変更する方法は以下のとおりです。
<body leftmargin=5 topmargin=0 onmouseover="document_onmouseover();"onclick="document_onclick();" id="all" >
<SCRIPT LANGUAGE="javascript">
var curObj= null;
var curObjmouseover=null;
function document_onclick() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
curObjmouseover.style.background='';
if(curObj!=null)
curObj.style.background='';
curObj=window.event.srcElement;
curObj.style.background='#ff0099';
}
}
function document_onmouseover() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
{curObjmouseover.style.background='';
curObjmouseover.style.color='#000000';}
if(curObj!=null)
curObj.style.background='';
curObjmouseover=window.event.srcElement;
curObjmouseover.style.background='#cccc00';
curObjmouseover.style.color='#ffffff';
}
}
</SCRIPT>
<div>
<a href='#'>来自脚本之家</a> </div>
<div> <a href='#'>来自脚本之家</a> </div>
この記事が JavaScript プログラミングのすべての人に役立つことを願っています。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
1664
14
1423
52
1317
25
1268
29
1243
24
DingTalk のグループ内の個人名を変更する方法_DingTalk のグループ内の個人名を変更する方法
Mar 29, 2024 pm 08:41 PM
1. まずDingTalkを開きます。 2. グループ チャットを開き、右上隅にある 3 つの点をクリックします。 3. このグループで私のニックネームを見つけます。 4. クリックして入力し、変更して保存します。
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
Googleセキュリティコードはどこで入手できますか
Mar 30, 2024 am 11:11 AM
Google Authenticator はユーザー アカウントのセキュリティを保護するために使用されるツールであり、そのキーは動的検証コードを生成するために使用される重要な情報です。 Google Authenticator のキーを忘れて、セキュリティ コードでしか認証できない場合は、この Web サイトの編集者が Google セキュリティ コードの入手先について詳しく説明しますので、お役に立てれば幸いです。詳細を知る ユーザーは以下を読み続けてください。まず電話の設定を開き、設定ページに入ります。ページを下にスクロールして Google を見つけます。 Googleページに移動し、「Googleアカウント」をクリックします。アカウント ページに入り、確認コードの下にある [表示] をクリックします。パスワードを入力するか、指紋を使用して身元を確認します。 Google セキュリティ コードを取得し、そのセキュリティ コードを使用して Google の ID を確認します。
Douyin Blue V の名前は変更できますか?法人Douyin Blue Vアカウントの名前を変更する手順は何ですか?
Mar 22, 2024 pm 12:51 PM
Douyin Blue V 認証は、Douyin プラットフォーム上の企業またはブランドの公式認証であり、ブランド イメージと信頼性の向上に役立ちます。企業の発展戦略の調整やブランドイメージの更新に伴い、企業はDouyin Blue V認証の名称を変更したい場合があります。では、Douyin Blue V は名前を変更できるのでしょうか?答えは「はい」です。この記事では、エンタープライズ Douyin Blue V アカウントの名前を変更する手順を詳しく紹介します。 1.Douyin Blue V の名前は変更できますか? Douyin Blue V アカウントの名前は変更できます。 Douyin の公式規定によると、企業の Blue V 認定アカウントは、一定の条件を満たした後にアカウント名の変更を申請できます。一般的に、企業は社名変更の合法性と必要性を証明するために、営業許可証、組織コード証明書などの関連資料を提供する必要があります。 2. 企業のDouyin Blue Vアカウントの名前を変更する手順は何ですか?
Xianyuで公開されている製品のアドレスの場所を変更する方法
Mar 28, 2024 pm 03:36 PM
Xianyuプラットフォームで製品を公開する際、ユーザーは実際の状況に応じて製品の地理的位置情報をカスタマイズできるため、潜在的な購入者は製品の特定の位置をより正確に把握できます。製品が無事に店頭に並べられれば、販売者の所在地が変わっても心配する必要はありません。 Xianyu プラットフォームは、柔軟で便利な変更機能を提供しています。公開された製品のアドレスを変更したい場合、どのように変更すればよいでしょうか? このチュートリアル ガイドでは、詳細なステップバイステップ ガイドが提供されます。助けてください、皆さん！ Xianyu でリリース製品アドレスを変更するにはどうすればよいですか? 1. Xianyu を開き、公開したものをクリックして製品を選択し、[編集] をクリックします。 2. 位置決めアイコンをクリックし、設定したいアドレスを選択します。
Win10のスリープ時間変更のヒントが明らかに
Mar 08, 2024 pm 06:39 PM
Win10 のスリープ時間変更のヒントが明らかに 現在広く使用されているオペレーティング システムの 1 つである Windows 10 には、ユーザーがコンピューターを使用していないときに電力を節約し、画面を保護するのに役立つスリープ機能があります。ただし、デフォルトのスリープ時間がユーザーのニーズを満たさない場合があるため、Win10 のスリープ時間を変更する方法を知ることが特に重要です。この記事では、Win10 のスリープ時間を変更するためのヒントを紹介します。これにより、システムのスリープ設定を簡単にカスタマイズできるようになります。 1.「設定」からWin10のスリープ時間を変更します。まず、最も簡単な修正です。
jsとvueの関係
Mar 11, 2024 pm 05:21 PM
js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。
jQuery を使用してすべての a タグのテキスト コンテンツを変更する
Feb 28, 2024 pm 05:42 PM
タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。
