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 相关文章推荐
firefox浏览器下javascript 拖动层效果与原理分析代码
Dec 04 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
js里怎么取select标签里的值并修改
Dec 10 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 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
分页显示Oracle数据库记录的类之二
2006/10/09 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
JavaScript之引用类型介绍
2012/08/10 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
前端面试知识点锦集(JavaScript篇)
2016/12/28 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
解决vue打包后刷新页面报错:Unexpected token
2019/08/27 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
google广告之另类js调用实现代码
2020/08/22 Javascript
Python入门篇之数字
2014/10/20 Python
Python端口扫描简单程序
2016/11/10 Python
Python对excel文档的操作方法详解
2018/12/10 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
组工干部对照检查材料
2014/08/25 职场文书
借名购房协议书范本
2014/10/06 职场文书
教师党员整改措施
2014/10/24 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
入党现实表现材料
2014/12/23 职场文书
青年教师个人总结
2015/02/11 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
九年级化学教学反思
2016/02/22 职场文书
导游词之张家界
2019/10/31 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python