jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法


Posted in Javascript onMay 13, 2013

使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示【#ffff00】,而IE10,、Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】,由于需要对颜色值进行判断处理,所以需要得到统一的颜色格式,最好是HEX格式的,方便处理点。搜索了一下,从国外的一个网站上得到一段代码:

$.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值。

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

$.fn.getBackgroundColor = function() {
     var rgb = $(this).css('background-color');
     if(rgb >= 0) return rgb;//如果是一个hex值则直接返回
    else{
         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;
 }
Javascript 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jQuery 幻灯片插件(带缩略图功能)
Jan 24 Javascript
Javascript中string转date示例代码
Nov 01 Javascript
node.js中的fs.symlink方法使用说明
Dec 15 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
微信小程序实现登录页云层漂浮的动画效果
May 05 Javascript
javascript实现二叉树的代码
Jun 08 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
怎么清空javascript数组
May 11 #Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 #Javascript
js运动框架_包括图片的淡入淡出效果
May 11 #Javascript
jQuery判断iframe中元素是否存在的方法
May 11 #Javascript
js实现点击注册按钮开始读秒倒计时的小例子
May 11 #Javascript
JS打开层/关闭层/移动层动画效果的实例代码
May 11 #Javascript
解析javascript 实用函数的使用详解
May 10 #Javascript
You might like
ADODB类使用
2006/11/25 PHP
php递归实现无限分类的方法
2015/07/28 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
php session_decode函数用法讲解
2019/05/26 PHP
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
2015/09/06 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
js中遍历Map对象的简单实例
2016/08/08 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python中tell()方法的使用详解
2015/05/24 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
金融行业务员的自我评价
2013/12/13 职场文书
工作的心得体会
2013/12/31 职场文书
后备干部考察材料
2014/02/12 职场文书
现场施工员岗位职责
2014/03/10 职场文书
违章停车检讨书
2014/10/21 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
MySQL锁机制
2021/04/05 MySQL