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 相关文章推荐
鼠标经过的文本框textbox变色
May 21 Javascript
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
Jan 28 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
微信小程序 根据不同用户切换不同TabBar
Apr 21 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
PHP 实现的将图片转换为TXT
2015/10/21 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jQuery创建DOM元素实例解析
2015/01/19 Javascript
使用plupload自定义参数实现多文件上传
2016/07/19 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
Form表单上传文件(type="file")的使用
2017/08/03 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue实现表单录入小案例
2019/09/27 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
Python多线程扫描端口代码示例
2018/02/09 Python
Python使用numpy实现BP神经网络
2018/03/10 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
python实现图片彩色转化为素描
2019/01/15 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python中调用其他程序的方式详解
2019/08/06 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
运动会闭幕式解说词
2014/02/21 职场文书
报关专员求职信范文
2014/02/22 职场文书
酒店端午节活动方案
2014/08/26 职场文书
2016新年慰问信范文
2015/03/25 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
2015年大学迎新工作总结
2015/07/16 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书