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 相关文章推荐
3Z版基于jquery的图片复选框(asp.net+jquery)
Apr 12 Javascript
网易JS面试题与Javascript词法作用域说明
Nov 09 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 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解析xml方法实例详解
2015/05/12 PHP
javascript之锁定表格栏位
2007/06/29 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
JavaScript正则表达式的分组匹配详解
2016/02/13 Javascript
JS实现根据文件字节数返回文件大小的方法
2016/08/02 Javascript
Vue.js第四天学习笔记
2016/12/02 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue中父子组件注意事项,传值及slot应用技巧
2018/05/09 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
VSCode launch.json配置详细教程
2020/06/18 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
python使用pil生成图片验证码的方法
2015/05/08 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
Python爬虫爬取新闻资讯案例详解
2020/07/14 Python
Python 高效编程技巧分享
2020/09/10 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
护士自荐信怎么写
2013/10/18 职场文书
地方课程教学计划
2015/01/19 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
Python进度条的使用
2021/05/17 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android