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 键盘事件的几个基本方法
Oct 30 Javascript
jQuery bind事件使用详解
May 05 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
什么是 AngularJS?AngularJS简介
Dec 06 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
AngularJs Dependency Injection(DI,依赖注入)
Sep 02 Javascript
JS简单获取日期相差天数的方法
Apr 24 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
如何检查一个对象是否为空
Apr 11 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线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
PHP的Yii框架中YiiBase入口类的扩展写法示例
2016/03/17 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
2017/07/12 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
基于vue+echarts数据可视化大屏展示的实现
2020/12/25 Vue.js
Python中zfill()方法的使用教程
2015/05/20 Python
EM算法的python实现的方法步骤
2018/01/02 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
python使用pygame模块实现坦克大战游戏
2020/03/25 Python
django框架创建应用操作示例
2019/09/26 Python
基于python实现雪花算法过程详解
2019/11/16 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
Python如何定义有可选参数的元类
2020/07/31 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
Java编程面试题
2016/04/04 面试题
工地安全检查制度
2014/02/04 职场文书
低碳环保倡议书
2014/04/14 职场文书
松材线虫病防治方案
2014/06/15 职场文书
第二次离婚起诉书
2015/05/18 职场文书
地道战观后感300字
2015/06/04 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android