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中==与===操作符的比较
Mar 21 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
Jun 29 Javascript
three.js欧拉角和四元数的使用方法
Jul 26 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 全局变量范围分析
2009/08/07 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
Yii框架中sphinx索引配置方法解析
2016/10/18 PHP
thinkphp修改配置进入默认首页的方法
2017/02/07 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
解决vue项目使用font-awesome,build后路径的问题
2018/09/01 Javascript
ios设备中angularjs无法改变页面title的解决方法
2018/09/13 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
vue键盘事件点击事件加native操作
2020/07/27 Javascript
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python 文件操作实现代码
2009/10/07 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
解读Python中degrees()方法的使用
2015/05/18 Python
使用PyV8在Python爬虫中执行js代码
2017/02/16 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python3安装speech语音模块的方法
2018/12/24 Python
Python手绘可视化工具cutecharts使用实例
2019/12/05 Python
详解Flask前后端分离项目案例
2020/07/24 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
用python批量下载apk
2020/12/29 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
测试驱动开发的主要步骤是什么
2014/12/10 面试题
高校毕业生登记表自我鉴定
2013/11/03 职场文书
2014年招生工作总结
2014/11/26 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
django 认证类配置实现
2021/11/11 Python
Spring 使用注解开发
2022/05/20 Java/Android