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 相关文章推荐
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
Vue 仿百度搜索功能实现代码
Feb 16 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
layui表格实现代码
May 20 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
实例讲解JavaScript截取字符串
Nov 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
paypal即时到账php实现代码
2010/11/28 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP+MySQL删除操作实例
2015/01/21 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
不用ajax实现点击文字即可编辑的方法
2007/12/16 Javascript
Javascript this指针
2009/07/30 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery中prepend()方法用法实例
2014/12/25 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
JavaScript中的操作符类型转换示例总结
2016/05/30 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python实现祝福弹窗效果
2019/04/07 Python
python实现简单日期工具类
2019/04/24 Python
python添加菜单图文讲解
2019/06/04 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
Python中的类与类型示例详解
2019/07/10 Python
python3中rank函数的用法
2019/11/27 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
Python csv文件记录流程代码解析
2020/07/16 Python
Django配置Bootstrap, js实现过程详解
2020/10/13 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
安德玛菲律宾官网:Under Armour菲律宾
2020/07/28 全球购物
java程序员面试交流
2012/11/29 面试题
2014年青年志愿者工作总结
2014/12/09 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
高中生毕业评语
2014/12/30 职场文书
优秀员工自荐书
2015/03/06 职场文书
六年级作文之关于梦
2019/10/22 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers