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 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
js遍历td tr等html元素
Dec 13 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
js打开新窗口方法整理
Feb 17 Javascript
JavaScript变量声明详解
Nov 27 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
vue过渡和animate.css结合使用详解
Jun 14 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 Javascript
JS继承定义与使用方法简单示例
Feb 19 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 获取百度的热词数据的代码
2012/02/18 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
JS中的eval 为什么加括号
2016/04/13 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
全面了解JavaScript对象进阶
2016/07/19 Javascript
switchery按钮的使用方法
2017/12/18 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
Python针对给定字符串求解所有子序列是否为回文序列的方法
2018/04/21 Python
python实现UDP协议下的文件传输
2020/03/20 Python
如何写python的配置文件
2020/06/07 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
税务专业毕业生自荐信
2013/11/10 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
法制宣传日活动总结
2014/04/29 职场文书
商业计算机应用专业自荐书
2014/06/09 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
事业单位岗位说明书
2015/10/08 职场文书
mysql函数全面总结
2021/11/11 MySQL
ubuntu安装jupyter并设置远程访问的实现
2022/03/31 Python