jQuery获取样式中颜色值的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了jQuery获取样式中颜色值的方法。分享给大家供大家参考。具体分析如下:

今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,IE中是以HEX格式显示【#ffff00】,而Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】,由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的)。搜索了一下,从国外的一个网站上得到一段代码:

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
 return rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

上面定义的是一个jQuery函数,我们可以通过 $("#bg").getHexBackgroundColor(); 获取到标签id="bg"的background-color的RGB值。

下面做一下小小的修改,就是加一个判断,如果是IE浏览器就直接拿值,如果是非IE浏览器则将值转换成RGB格式:

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 if(!$.browser.msie){
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}
  rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
 }
 return rgb;
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript CSS画图之基础篇
Jul 29 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
webpack入门必知必会
Jan 16 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
Vuex中的State使用介绍
Jan 19 Javascript
JavaScript 中的六种循环方法
Jan 06 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 #Javascript
JS清除选择内容的方法
Jan 29 #Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 #Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 #Javascript
jQuery中$.each使用详解
Jan 29 #Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 #Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 #Javascript
You might like
php将会员数据导入到ucenter的代码
2010/07/18 PHP
php下批量挂马和批量清马代码
2011/02/27 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
thinkPHP5.0框架事务处理操作简单示例
2018/09/07 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
jquery 插件开发备注
2010/08/27 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
jQuery遍历节点树方法分析
2016/09/08 Javascript
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
Vue记住滚动条和实现下拉加载的完美方法
2020/07/31 Javascript
js实现简单扫雷
2020/11/27 Javascript
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
python获取本机所有IP地址的方法
2018/12/26 Python
python pandas库的安装和创建
2019/01/10 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
Python定义一个函数的方法
2020/06/15 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
职业教育毕业生求职信
2013/11/09 职场文书
思想品德自我评价
2014/02/04 职场文书
建筑施工安全责任书
2014/07/24 职场文书
2014党员民主评议个人思想剖析发言
2014/09/19 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
大学生党员个人总结
2015/02/13 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技