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 相关文章推荐
jquery中交替点击事件的实现代码
Feb 14 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
基于jquery实现多级菜单效果
Jul 25 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
Aug 14 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
详解vue的diff算法原理
May 20 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
JS canvas实现画板和签字板功能
Feb 23 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
?繁体转换的class
2006/10/09 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
jQuery extend 的简单实例
2013/09/18 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
简单的js计算器实现
2016/10/26 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python语法快速入门指南
2015/10/12 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
python3连接mysql获取ansible动态inventory脚本
2020/01/19 Python
JupyterNotebook 输出窗口的显示效果调整方法
2020/04/13 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python学习之os模块及用法
2020/06/03 Python
Python基于template实现字符串替换
2020/11/27 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
会计毕业生自荐书
2014/06/12 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
音乐教师个人总结
2015/02/06 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
python实现的web监控系统
2021/04/27 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers