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 相关文章推荐
js 实现打印网页中定义的部分内容的代码
Apr 01 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
浅谈js-FCC算法Friendly Date Ranges(详解)
Apr 10 Javascript
jQuery操作之效果详解
May 19 jQuery
使用requirejs模块化开发多页面一个入口js的使用方式
Jun 14 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 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 $_ENV为空的原因分析
2009/06/01 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php实现微信模板消息推送
2018/03/30 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
如何使用Bootstrap创建表单
2017/03/29 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
vue-cli扩展多模块打包的示例代码
2018/04/09 Javascript
详解vue的双向绑定原理及实现
2019/05/05 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
微信小程序实现3D轮播图效果(非swiper组件)
2019/09/21 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python解析基于xml格式的日志文件
2017/02/25 Python
Python字符串处理实例详解
2017/05/18 Python
Python装饰器用法示例小结
2018/02/11 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
如何在python字符串中输入纯粹的{}
2018/08/22 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
团购业务员岗位职责
2014/03/15 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
大学生翘课检讨书范文
2014/10/06 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS
Java Spring Boot请求方式与请求映射过程分析
2022/06/25 Java/Android