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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
Jul 24 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
基于Datatables跳转到指定页的简单实例
Nov 09 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
利用Node.js如何实现文件循环覆写
Apr 05 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 采集程序原理分析篇
2010/03/05 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
Yii2框架数据验证操作实例详解
2018/05/02 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
使用JavaScript实现在页面中显示距离2017年中秋节的天数
2017/09/26 Javascript
vue2.0 自定义 饼状图 (Echarts)组件的方法
2018/03/02 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python字符串连接方式汇总
2014/08/21 Python
跟老齐学Python之for循环语句
2014/10/02 Python
python实现SOM算法
2018/02/23 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
python 直接赋值和copy的区别详解
2019/08/07 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
selenium学习教程之定位以及切换frame(iframe)
2021/01/04 Python
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
什么时候需要进行强制类型转换
2016/09/03 面试题
综合管理员岗位职责
2015/02/11 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
详解NodeJS模块化
2021/06/15 NodeJs
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS