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具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
JavaScript没有监听物理返回键的API，所以只能使用 popstate 事件监听。接下来通过本文给大家分享JavaScript监听手机物理返回键的两种解决方法，感兴趣的朋友一起看看吧2017-08-08
这篇文章主要为大家详细介绍了微信小程序自定义底部弹出框动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
JavaScript是用来在数据被传输到服务前对html表单中输入的数据进行验证，使用javascript对用户输入的信息进行验证是项目必须的，下面小编给大家整理一些比较常用的javascript表单验证，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript随机点名器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Tab 选项卡切换效果在现如今的网页中，运用的也是比较多的，包括点击切换、滑动切换、延迟切换、自动切换等多种效果，在这篇博文里，我们是通过原生 JavaScript 来实现 Tab 点击切换的效果。2017-03-03
JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一,那么如何在JS中实现继承呢?下面这篇文章主要给大家介绍了关于JS中六种继承方式以及优缺点的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了基于javascript实现句子翻牌网页版小游戏的相关资料,需要的朋友可以参考下2016-03-03
这篇文章主要给大家介绍了关于微信小程序如何实现全局重新加载的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
这篇文章主要为大家详细介绍了javascript表单事件处理方法，感兴趣的小伙伴们可以参考一下2016-05-05
最新评论