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 相关文章推荐
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
javascript模块化简单解析
Apr 07 Javascript
javaScript中的原型解析【推荐】
May 05 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
layUI实现三级导航菜单效果
Jul 26 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
php利用imagemagick实现复古老照片效果实例
2017/02/16 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
javascript数字数组去重复项的实现代码
2010/12/30 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jQuery根据元素值删除数组元素的方法
2015/06/24 Javascript
Java中Timer的用法详解
2015/10/21 Javascript
Bootstrap每天必学之面板
2015/11/30 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
解决node-sass偶尔安装失败的方法小结
2018/12/05 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
[38:31]完美世界DOTA2联赛PWL S3 Magma vs GXR 第一场 12.13
2020/12/17 DOTA
Python list操作用法总结
2015/11/10 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
Python实现基本数据结构中队列的操作方法示例
2017/12/04 Python
wxpython实现图书管理系统
2018/03/12 Python
Python3自动签到 定时任务 判断节假日的实例
2018/11/13 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
2013/01/31 HTML / CSS
Java程序员面试题
2016/09/27 面试题
统计系教授推荐信
2014/02/28 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
音乐课外活动总结
2015/05/09 职场文书
国情备忘录观后感
2015/06/04 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书