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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
仿猪八戒网左下角的文字滚动效果
Oct 28 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
js判读浏览器是否支持html5的canvas的代码
Nov 18 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记8)
Dec 24 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
解决Extjs下拉框不显示的问题
Jun 21 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表单转换textarea换行符的方法
2010/09/10 PHP
php发送post请求函数分享
2014/03/06 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
2011/04/27 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
2018/12/29 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python decimal模块使用方法详解
2020/06/08 Python
jupyter notebook 写代码自动补全的实现
2020/11/02 Python
python 爬虫请求模块requests详解
2020/12/04 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
python re.match()用法相关示例
2021/01/27 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
学生实习自我鉴定
2013/10/11 职场文书
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
长城英文导游词
2015/01/30 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
快速学习Oracle触发器和游标
2021/06/30 Oracle
golang中的struct操作
2021/11/11 Golang
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫