js取得及修改網頁背景色和字體色的方法_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

js取得及修改網頁背景色和字體色的方法_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:22 PM

js 修改獲取

本文實例講述了js取得及修改網頁背景色和字體色的方法。分享給大家參考，具體如下：

取得網頁的背景色和字體顏色，方法如下：

思想：透過取得顏色屬性值得到的是 rgb 色，不是我們想要的，所以需要將 rgb 色裝換為十六進位色，先得到rgb色：

程式碼如下:

複製程式碼程式碼如下:

var rgb = document.getElementById('color').style.backgroundor >

得到格式如下： rgb(225, 22, 23); 然後進行拆分：
程式碼如下:

複製程式碼程式碼如下:

var rgb = rgb.split('(')[1]; //分後為[rgb, 225,22,23)]形式，長度為2的陣列

再將（225,22,23）字串進行拆分（注意：只有number類型的才能轉換，所以用 parseInt 強制轉換類型！）：
程式碼如下:

for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据
}

登入後複製

最後的組合:

程式碼如下:

複製程式碼程式碼如下:

str = '#'+str[0]+str[1]+str[ 2];

完整程式碼如下：

<!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程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7656

CakePHP 教程

1393

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT迷你填字遊戲答案

111

Related knowledge

釘釘怎麼修改群組裡的個人名稱_釘釘修改群組個人名稱方法 Mar 29, 2024 pm 08:41 PM

1.首先打開釘釘。 2.打開群組聊，點選右上角的三個點。 3.找到我在本群的暱稱。 4.點選進入即可修改儲存。

建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計

抖音藍V可以改名字嗎？企業抖音藍V號名稱修改步驟有哪些？ Mar 22, 2024 pm 12:51 PM

抖音藍V認證是企業或品牌在抖音平台上的官方認證，有助於提升品牌形象和可信度。隨著企業發展策略的調整或品牌形象的更新，企業可能希望更改抖音藍V認證的名字。那麼，抖音藍V可以改名字嗎？答案是可以的。本文將詳細介紹企業抖音藍V號名稱修改的步驟。一、抖音藍V可以改名字嗎？抖音藍V帳號是可以改名字的。根據抖音官方規定，企業藍V認證帳號在滿足一定條件後，可以申請修改帳號名稱。一般來說，企業需要提供相關的證明資料，如營業執照、組織機構代碼證等，以證明修改名稱的合法性和必要性。二、企業抖音藍V號名稱修改步驟有哪

谷歌安全碼在哪裡獲取 Mar 30, 2024 am 11:11 AM

谷歌驗證器是一種用於保護使用者帳戶安全的工具，其金鑰是用於產生動態驗證碼的重要資訊。如果忘記了谷歌驗證器的金鑰，只能透過安全碼進行驗證，那麼下文站小編就會為大家帶來谷歌安全碼在哪裡取得的詳細內容介紹，希望能幫助到大家，想要了解的用戶們就請跟著下文繼閱讀吧！首先開啟手機設置，進入設定頁面。下拉頁面，找到Google。進入Google頁面，點選Google帳號。進入帳號頁面，點選驗證碼下方的檢視。輸入密碼或使用指紋驗證身分。取得Google安全碼，利用安全碼驗證Google身分。

Win10睡眠時間修改技巧大揭秘 Mar 08, 2024 pm 06:39 PM

Win10睡眠時間修改技巧大揭密作為目前廣泛使用的作業系統之一，Windows10擁有睡眠功能，幫助使用者在不使用電腦時節省電力並保護螢幕。然而，有時候預設的睡眠時間並不符合使用者的需求，因此了解如何修改Win10睡眠時間就顯得格外重要。本文將揭示Win10睡眠時間修改的技巧，讓您輕鬆自訂系統的睡眠設定。一、透過「設定」修改Win10睡眠時間首先，最簡單的修

閒魚怎麼修改已發布商品地址位置 Mar 28, 2024 pm 03:36 PM

在閒魚平台發布商品時，用戶可以根據實際情況自訂設定寶貝的地理位置信息，這樣潛在買家就能更精準地掌握商品的具體所在地。一旦商品成功上架，若賣家的地理位置有所變動，也無需擔憂。閒魚平台特別提供了靈活且便捷的修改功能，那麼當我們想要修改已經發布產品的地址究竟該如何修改呢，這篇教程攻略就將為大家帶來詳細的步驟攻略介紹，希望能幫助到大家！閒魚怎麼修改發布產品地址？ 1.打開閒魚，點擊我發布的，選擇商品，點擊編輯。 2、點選定位圖標，選擇需要設定的地址即可。

真我 12 Pro怎麼安裝雙卡？ Mar 18, 2024 pm 02:10 PM

雖然說國產手機的大致操作是很相似的，但是在有的細節上面還是會有些區別的，比如說不同的手機型號和製造商可能會有不同的雙卡安裝方式。二真我12Pro這款新手機也是支援雙卡雙待的，但這款手機具體又該怎麼安裝雙卡呢？真我12Pro怎麼安裝雙卡？安裝之間記得先把手關機喲。步驟一查找SIM卡托盤：查找手機的SIM卡托盤,通常，在真我12Pro中，SIM卡托盤位於手機的側邊或頂部。步驟二插入第一張SIM卡，使用專用的SIM卡針或一個細小的物體，將其插入SIM卡托盤中的開槽,然後，將第一張SIM卡小心地

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

js取得及修改網頁背景色和字體色的方法_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題