js獲得網(wǎng)頁背景色和字體色的方法
更新時間：2014年03月21日 16:25:56 作者：
這篇文章主要介紹了js獲得網(wǎng)頁背景色和字體色的方法,需要的朋友可以參考下
獲得網(wǎng)頁的背景色和字體顏色，方法如下：
思想： 通過取得顏色屬性值得到的是 rgb 色，不是我們想要的，所以需要將 rgb 色裝換為 十六進制色 ，首先獲得rgb色 ：
var rgb = document.getElementById('color').style.backgroundColor；
得到格式如下： rgb(225, 22, 23); 然后進行拆分：
var rgb = rgb.split('(')[1]; //拆分后為 [rgb, 225,22,23)]形式，長度為2的數(shù)組
再將 （225,22,23）字符串進行拆分（注意：只有number類型的才能轉(zhuǎn)換，所以用 parseInt 強制轉(zhuǎn)換類型?。?：
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 數(shù)組保存拆分后的數(shù)據(jù)
}
最后的組合:
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>
思想： 通過取得顏色屬性值得到的是 rgb 色，不是我們想要的，所以需要將 rgb 色裝換為 十六進制色 ，首先獲得rgb色 ：
復(fù)制代碼 代碼如下:
var rgb = document.getElementById('color').style.backgroundColor；
得到格式如下： rgb(225, 22, 23); 然后進行拆分：
復(fù)制代碼 代碼如下:
var rgb = rgb.split('(')[1]; //拆分后為 [rgb, 225,22,23)]形式，長度為2的數(shù)組
再將 （225,22,23）字符串進行拆分（注意：只有number類型的才能轉(zhuǎn)換，所以用 parseInt 強制轉(zhuǎn)換類型?。?：
復(fù)制代碼 代碼如下:
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 數(shù)組保存拆分后的數(shù)據(jù)
}
最后的組合:
復(fù)制代碼 代碼如下:
str = '#'+str[0]+str[1]+str[2];
整個代碼如下：
復(fù)制代碼 代碼如下:
<!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>
相關(guān)文章
JavaScript中的垃圾回收與內(nèi)存泄漏示例詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中垃圾回收與內(nèi)存泄漏的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript監(jiān)聽手機物理返回鍵的兩種解決方法
JavaScript沒有監(jiān)聽物理返回鍵的API，所以只能使用 popstate 事件監(jiān)聽。接下來通過本文給大家分享JavaScript監(jiān)聽手機物理返回鍵的兩種解決方法，感興趣的朋友一起看看吧2017-08-08
這篇文章主要為大家詳細介紹了微信小程序自定義底部彈出框動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
JavaScript是用來在數(shù)據(jù)被傳輸?shù)椒?wù)前對html表單中輸入的數(shù)據(jù)進行驗證，使用javascript對用戶輸入的信息進行驗證是項目必須的，下面小編給大家整理一些比較常用的javascript表單驗證，需要的朋友可以參考下2015-08-08
這篇文章主要介紹了JavaScript隨機點名器，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
JavaScript 實現(xiàn) Tab 點擊切換實例代碼
Tab 選項卡切換效果在現(xiàn)如今的網(wǎng)頁中，運用的也是比較多的，包括點擊切換、滑動切換、延遲切換、自動切換等多種效果，在這篇博文里，我們是通過原生 JavaScript 來實現(xiàn) Tab 點擊切換的效果。2017-03-03
JS作為面向?qū)ο蟮娜躅愋驼Z言,繼承也是其非常強大的特性之一,那么如何在JS中實現(xiàn)繼承呢?下面這篇文章主要給大家介紹了關(guān)于JS中六種繼承方式以及優(yōu)缺點的相關(guān)資料,需要的朋友可以參考下2021-10-10
基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小游戲
這篇文章主要介紹了基于javascript實現(xiàn)句子翻牌網(wǎng)頁版小游戲的相關(guān)資料,需要的朋友可以參考下2016-03-03
這篇文章主要給大家介紹了關(guān)于微信小程序如何實現(xiàn)全局重新加載的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細介紹了javascript表單事件處理方法，感興趣的小伙伴們可以參考一下2016-05-05