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 实现复制到粘贴板的功能代码
May 13 Javascript
js 函数的副作用分析
Aug 23 Javascript
JavaScript实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
AngularJS 如何在控制台进行错误调试
Jun 07 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
JS监听组合按键思路及实现过程
Apr 17 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
vue中watch的用法汇总
Dec 28 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
用session做客户验证时的注意事项
2006/10/09 PHP
php 404错误页面实现代码
2009/06/22 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
javascript的数据类型、字面量、变量介绍
2012/05/23 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
javascript编写简易计算器
2017/05/06 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
实习鉴定评语
2014/01/19 职场文书
远程研修随笔感言
2014/02/10 职场文书
社区禁毒工作方案
2014/06/02 职场文书
中学生运动会口号
2014/06/07 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书
创业计划书之物流运送
2019/09/17 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Pandas 数据编码的十种方法
2022/04/20 Python