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实现左右div自适应高度完全相同的代码
Aug 09 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
Javascript基础_标记文字的实现方法
Jun 14 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 Javascript
安装vue-cli的简易过程
May 22 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
浅谈Vue组件单元测试究竟测试什么
Feb 05 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
JavaScript的Set数据结构详解
Feb 18 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
实用函数4
2007/11/08 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
PHPMYADMIN导入数据最大为2M的解决方法
2012/04/23 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
探寻PHP脚本不报错的原因
2014/06/12 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
php实现有序数组旋转后寻找最小值方法
2018/09/27 PHP
使用PHP开发留言板功能
2019/11/19 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
js中更短的 Array 类型转换
2011/10/30 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
2014/11/28 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
electron 如何将任意资源打包的方法步骤
2020/04/16 Javascript
vue实现五子棋游戏
2020/05/28 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
Ubuntu下安装PyV8
2016/03/13 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
浅谈Python 递归算法指归
2019/08/22 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python中time.ctime()实例用法
2021/02/03 Python
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
《金钱的魔力》教学反思
2014/02/24 职场文书
保安部任务及岗位职责
2014/02/25 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
付款承诺函范文
2015/01/21 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript