首頁 > 開發者 > JavaScript

js擷取及修改網頁背景色和字型色的方法，js網頁背景

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

js擷取及修改網頁背景色和字型色的方法，js網頁背景

本文執行個體講述了js擷取及修改網頁背景色和字型色的方法。分享給大家供大家參考，具體如下：

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

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

代碼如下:
複製代碼 代碼如下:var rgb = document.getElementById('color').style.backgroundColor;
得到格式如下： 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程式設計有所協助。

您可能感興趣的文章:
  • JavaScript實現點擊按鈕切換網頁背景色的方法
  • JS實現進入頁面時漸層背景色的方法
  • js獲得網頁背景色和字型色的方法
  • javascript修改表格背景色執行個體代碼分享
  • javascript隨機顯示背景圖片的方法
  • js實現按鈕加背景圖片常用方法
  • js實現網頁隨機切換背景圖片的方法
  • 純js實現背景圖片轉場效果代碼
  • javascript設定頁面背景色及背景圖片的方法

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More