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 相关文章推荐
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
jquery获取input type=text中的值的各种方式(总结)
Dec 02 Javascript
详解如何使用webpack+es6开发angular1.x
Aug 16 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 Javascript
vue3中的组件间通信
Mar 31 Vue.js
页面装载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/12/21 PHP
php 5.3.5安装memcache注意事项小结
2011/04/12 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
js arguments.callee的应用代码
2009/05/07 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
jquery 通过name快速取值示例
2014/01/24 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
解析vue路由异步组件和懒加载案例
2018/06/08 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
js实现轮播图特效
2020/05/28 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
JS数组转字符串实现方法解析
2020/09/04 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
Python解析最简单的验证码
2016/01/07 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python检测网络延迟的代码
2018/05/15 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
基于css3的属性transition制作菜单导航效果
2015/09/01 HTML / CSS
生物制药毕业生自荐信
2013/10/16 职场文书
《云房子》教学反思
2014/04/20 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
大学生求职意向书
2015/05/11 职场文书
劳动仲裁调解书
2015/05/20 职场文书
如何写一份具有法律效力的借款协议书?
2019/07/02 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers
深入详解JS函数的柯里化
2021/06/09 Javascript
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python