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 相关文章推荐
node.js中的console.error方法使用说明
Dec 10 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
Mar 31 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
JavaScript实现快速排序的方法分析
Jan 10 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
swiper 解决动态加载数据滑动失效的问题
Feb 26 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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
一个PHP分页类的代码
2011/05/18 PHP
PHP使用DirectoryIterator显示下拉文件列表的方法
2015/03/13 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP保存session到memcache服务器的方法
2016/01/19 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
JavaScript高级程序设计(第3版)学习笔记7 js函数(上)
2012/10/11 Javascript
JavaScript判断DOM何时加载完毕的技巧
2012/11/11 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
js clearInterval()方法的定义和用法
2015/11/11 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
2016/06/20 Javascript
详解使用nodeJs安装Vue-cli
2017/05/17 NodeJs
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
layDate日期控件使用方法详解
2018/11/15 Javascript
layui关闭弹窗后刷新主页面和当前更改项的例子
2019/09/06 Javascript
js实现无刷新监听URL的变化示例代码详解
2020/06/03 Javascript
[47:04]LGD vs infamous Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python getpass模块用法及实例详解
2019/10/07 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
Python Django搭建网站流程图解
2020/06/13 Python
python实现移动木板小游戏
2020/10/09 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
现代化办公人员工作的自我评价
2013/10/16 职场文书
求职简历的自我评价
2014/01/31 职场文书
个人租房协议书
2014/04/09 职场文书
技术入股合作协议书
2014/10/07 职场文书
2014年党的群众路线整改措施思想汇报
2014/10/12 职场文书
新闻稿格式范文
2015/07/18 职场文书
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript