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工作常用实例 使用AJAX使网页进行异步更新
Jul 26 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
Dec 20 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
理解javascript中DOM事件
Dec 25 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
javaScript产生随机数的用法小结
Apr 21 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
vue实现可移动的悬浮按钮
Mar 04 Vue.js
页面装载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
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP获取当前页面URL函数实例
2014/10/22 PHP
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
javascript原始值和对象引用实例分析
2015/04/25 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
详解如何使用微信小程序云函数发送短信验证码
2019/03/13 Javascript
ajaxfileupload.js实现上传文件功能
2019/04/19 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
python list元素为tuple时的排序方法
2018/04/18 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Apache,wsgi,django 程序部署配置方法详解
2019/07/01 Python
python定时任务 sched模块用法实例
2019/11/04 Python
简单了解python元组tuple相关原理
2019/12/02 Python
tensorflow获取预训练模型某层参数并赋值到当前网络指定层方式
2020/01/24 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
英国高档时尚男装购物网站:MR PORTER
2016/08/09 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
2014年应急工作总结
2014/12/11 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
驾驶员安全责任协议书
2016/03/22 职场文书