js獲得網頁背景色和字體色的方法
更新時間：2014年03月21日 16:25:56 作者：
這篇文章主要介紹了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>
思想： 通過取得顏色屬性值得到的是 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實現命名空間就沒有這么舒服了，Javascript只有函數作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認為是一個命名空間的，有時候因為一些重名問題導致的錯誤讓人莫名其妙，難以調試解決2013-08-08
最近在看一些Javascript玩魔術的資料，感嘆那些真正的是在玩技術，相當讓人佩服。2011-04-04
這篇文章主要為大家介紹了Javascript觀察者模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了使用Require.js封裝原生js輪播圖的實現代碼,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JS實現計算小于非負數n的素數的數量算法,可實現針對一定范圍內素數個數的統(tǒng)計功能,涉及javascript數值運算相關操作技巧,需要的朋友可以參考下2019-02-02
大家都知道在js中沒有類的概念，因此它的對象也與基于類的語言中的對象有所不同。所以大家要了解面向對象，首先要了解js中的對象和原型，下面本文給大家介紹JavaScript中的對象和原型(一)知識，一起看下吧2016-08-08
隨著JavaScript技術的不斷進步和語言的持續(xù)演化,一些曾經備受矚目的功能逐漸變得不再那么有用,甚至被更現代、更高效的替代方案所取代,今天,我們就來一起探討幾個原生JavaScript中那些“不再那么有用”的功能與API,最好避免使用的幾個函數方法2025-01-01
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。2015-01-01
javascript:google 向上向下滾動特效,兼容IE6,7,8,FF
這個代碼是我之前帶網上找的，因為今天再次用到，所以記錄下來，免得以后都找不到，我現在想去搜它的說明文檔都搜不到！2010-08-08
2009-12-12