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 18 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
Nov 07 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
Vue.js实现表格渲染的方法
Sep 07 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
详解Angular cli配置过程记录
Nov 07 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
Feb 11 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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作为Shell脚本语言使用
2006/10/09 PHP
PHP一些常用的正则表达式字符的一些转换
2008/07/29 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
Node.js的包详细介绍
2015/01/14 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
jQuery 中的 DOM 操作
2016/04/26 Javascript
jQuery中的通配符选择器使用总结
2016/05/30 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
2017/07/27 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
jQuery pager.js 插件动态分页功能实例分析
2019/08/02 jQuery
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
python检索特定内容的文本文件实例
2018/06/05 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
wxPython实现带颜色的进度条
2019/11/19 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python正则表达式学习小例子
2020/03/03 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
南京某软件公司的.net面试题
2015/11/30 面试题
秋季运动会广播稿大全
2014/02/17 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
聘任通知书
2015/09/21 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书
如何用JavaScript检测当前浏览器是无头浏览器
2021/04/27 Javascript
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js