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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
jquery中使用ajax获取远程页面信息
Nov 13 Javascript
Javascript执行效率全面总结
Nov 04 Javascript
Bootstrap精简教程
Nov 27 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
JS正则表达式完美实现身份证校验功能
Oct 18 Javascript
初学node.js中实现删除用户路由
May 27 Javascript
JS多个异步请求 按顺序执行next实现解析
Sep 16 Javascript
使用Vue生成动态表单
Nov 26 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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新手上路(二)
2006/10/09 PHP
NOT NULL 和NULL
2007/01/15 PHP
php检测图片木马多进制编程实践
2013/04/11 PHP
开源php中文分词系统SCWS安装和使用实例
2014/04/11 PHP
PHP多维数组转一维数组的简单实现方法
2015/12/23 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
从面试题学习Javascript 面向对象(创建对象)
2012/03/30 Javascript
iframe里面的元素触发父窗口元素事件的jquery代码
2014/10/19 Javascript
js验证上传图片的方法
2015/05/12 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
2017/11/27 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
2018/09/29 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
[02:46]完美世界DOTA2联赛PWL DAY4集锦
2020/11/03 DOTA
python实现录音小程序
2020/10/26 Python
Django单元测试工具test client使用详解
2019/08/02 Python
python验证码图片处理(二值化)
2019/11/01 Python
Python连接Impala实现步骤解析
2020/08/04 Python
赔偿协议书范本
2014/04/15 职场文书
村干部培训方案
2014/05/02 职场文书
团结演讲稿范文
2014/05/23 职场文书
计算机专业求职信
2014/06/02 职场文书
个人违纪检讨书
2014/09/15 职场文书
聘任通知书
2015/09/21 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书