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 相关文章推荐
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
理解javascript正则表达式
Mar 08 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
vue-resource拦截器设置头信息的实例
Oct 27 Javascript
layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子
Sep 06 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 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
论坛头像随机变换代码
2006/10/09 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
php判断文件上传类型及过滤不安全数据的方法
2014/12/17 PHP
php中session与cookie的比较
2015/01/27 PHP
php随机抽奖实例分析
2015/03/04 PHP
在Mac OS上搭建PHP的Yii框架及相关测试环境
2016/02/14 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
bootstrap响应式工具使用详解
2017/11/29 Javascript
vue实现验证码输入框组件
2017/12/14 Javascript
Seajs源码详解分析
2019/04/02 Javascript
python异步任务队列示例
2014/04/01 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
Python实现的KMeans聚类算法实例分析
2018/12/29 Python
python读取mysql数据绘制条形图
2020/03/25 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
skyn ICELAND官网:冰岛成分天然护肤品
2020/08/24 全球购物
高中毕业自我鉴定范文
2013/10/02 职场文书
二手书店创业计划书
2014/01/16 职场文书
教师对学生的寄语
2014/04/03 职场文书
经管应届生求职信范文
2014/05/18 职场文书
五一促销活动总结
2014/07/01 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
离婚被告代理词
2015/05/23 职场文书
董事长致辞
2015/07/29 职场文书
2016创先争优活动党员公开承诺书
2016/03/24 职场文书
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL