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 相关文章推荐
jQuery Flash/MP3/Video多媒体插件
Jan 18 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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常用技术文之文件操作和目录操作总结
2014/09/27 PHP
twig里使用js变量的方法
2016/02/05 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
YII框架关联查询操作示例
2019/04/29 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jquery获得当前html页面源码的方法
2015/07/14 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
AngularJS  ng-table插件设置排序
2016/09/21 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
vue 解决form表单提交但不跳转页面的问题
2019/10/30 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
python3.5安装python3-tk详解
2019/04/26 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
基于python实现微信好友数据分析(简单)
2020/02/16 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
如何利用Python matplotlib绘制雷达图
2020/12/21 Python
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
集团公司总经理岗位职责
2013/12/20 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
安全生产月标语
2014/10/07 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
python 多态 协议 鸭子类型详解
2021/11/27 Python