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