js获得网页背景色和字体色的方法


Posted in Javascript onMarch 21, 2014

获得网页的背景色和字体颜色,方法如下:

思想: 通过取得颜色属性值得到的是 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脚本代码跑起来。
Jan 09 Javascript
jQuery 开天辟地入门篇一
Dec 09 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
js生成随机数的方法实例
Oct 16 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
Javascript操作dom对象之select全面解析
Apr 24 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Vue 刷新当前路由的实现代码
Sep 26 Javascript
页面装载js及性能分析方法介绍
Mar 21 #Javascript
Js冒泡事件详解及阻止示例
Mar 21 #Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 #Javascript
js中把JSON字符串转换成JSON对象最好的方法
Mar 21 #Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 #Javascript
将中国标准时间转换成标准格式的代码
Mar 20 #Javascript
如何将php数组或者对象传递给javascript
Mar 20 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
adodb与adodb_lite之比较
2006/12/31 PHP
PHP音乐采集(部分代码)
2007/02/14 PHP
php文件上传类的分享
2017/07/06 PHP
TNC vs BOOM BO3 第一场2.13
2021/03/10 DOTA
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
jquery 新浪网易的评论块制作
2010/07/01 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
2020/01/07 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
详解python开发环境搭建
2016/12/16 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
pyspark 随机森林的实现
2020/04/24 Python
python 实现逻辑回归
2020/12/30 Python
局部内部类是否可以访问非final变量?
2013/04/20 面试题
计算机专业个人求职信范例
2013/09/23 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
运动会广播稿400字
2014/01/25 职场文书
关于环保的建议书
2014/05/12 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
公司的门卫岗位职责
2014/09/09 职场文书
2014年社区计生工作总结
2014/11/18 职场文书
美术教师个人总结
2015/02/06 职场文书
2019年个人工作总结范文
2019/03/25 职场文书