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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
jQuery之按钮组件的深入解析
Jun 19 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
Bootstrap每天必学之滚动监听
Mar 16 Javascript
jQuery获取元素父节点的方法
Jun 21 Javascript
Javascrip实现文字跳动特效
Nov 27 Javascript
详解JavaScript RegExp对象
Feb 04 Javascript
JS+DIV实现的卷帘效果示例
Mar 22 Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 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文件向数据库导入海量数据的方法
2013/04/23 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
推荐20家国外的脚本下载网站
2011/04/28 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
2013/12/25 Javascript
js用闭包遍历树状数组的方法
2014/03/19 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
2016/12/08 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
Python3中的2to3转换工具使用示例
2015/06/12 Python
pandas中Timestamp类用法详解
2017/12/11 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
python-opencv获取二值图像轮廓及中心点坐标的代码
2019/08/27 Python
Python 实现自动导入缺失的库
2019/10/29 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
python实现PolynomialFeatures多项式的方法
2021/01/06 Python
联想中国官方商城:Lenovo China
2017/10/18 全球购物
销售人员获奖感言
2014/02/05 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
《将心比心》教学反思
2014/04/08 职场文书
感恩教育月活动总结
2014/07/07 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
超市店庆活动方案
2014/08/31 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书