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實(shí)現(xiàn)命名空間就沒有這么舒服了，Javascript只有函數(shù)作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認(rèn)為是一個(gè)命名空間的，有時(shí)候因?yàn)橐恍┲孛麊栴}導(dǎo)致的錯(cuò)誤讓人莫名其妙，難以調(diào)試解決2013-08-08
Javascript 八進(jìn)制轉(zhuǎn)義字符(8進(jìn)制)
最近在看一些Javascript玩魔術(shù)的資料，感嘆那些真正的是在玩技術(shù)，相當(dāng)讓人佩服。2011-04-04
手把手教你用Javascript實(shí)現(xiàn)觀察者模式
這篇文章主要為大家介紹了Javascript觀察者模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
使用Require.js封裝原生js輪播圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用Require.js封裝原生js輪播圖的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06
JS實(shí)現(xiàn)計(jì)算小于非負(fù)數(shù)n的素?cái)?shù)的數(shù)量算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)計(jì)算小于非負(fù)數(shù)n的素?cái)?shù)的數(shù)量算法,可實(shí)現(xiàn)針對(duì)一定范圍內(nèi)素?cái)?shù)個(gè)數(shù)的統(tǒng)計(jì)功能,涉及javascript數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
大家都知道在js中沒有類的概念，因此它的對(duì)象也與基于類的語(yǔ)言中的對(duì)象有所不同。所以大家要了解面向?qū)ο?，首先要了解js中的對(duì)象和原型，下面本文給大家介紹JavaScript中的對(duì)象和原型(一)知識(shí)，一起看下吧2016-08-08
隨著JavaScript技術(shù)的不斷進(jìn)步和語(yǔ)言的持續(xù)演化,一些曾經(jīng)備受矚目的功能逐漸變得不再那么有用,甚至被更現(xiàn)代、更高效的替代方案所取代,今天,我們就來一起探討幾個(gè)原生JavaScript中那些“不再那么有用”的功能與API,最好避免使用的幾個(gè)函數(shù)方法2025-01-01
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。2015-01-01
javascript:google 向上向下滾動(dòng)特效,兼容IE6,7,8,FF
這個(gè)代碼是我之前帶網(wǎng)上找的，因?yàn)榻裉煸俅斡玫剑杂涗浵聛?，免得以后都找不到，我現(xiàn)在想去搜它的說明文檔都搜不到！2010-08-08
JavaScript Cookie 直接瀏覽網(wǎng)站分網(wǎng)址
2009-12-12