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 相关文章推荐
特殊字符、常规符号及其代码对照表
Jun 26 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
怎么清空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绘图中显示不出图片的原因及解决
2014/03/05 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
PHP7 整型处理机制修改
2021/03/09 PHP
解放web程序员的输入验证
2006/10/06 Javascript
拖动一个HTML元素
2006/12/22 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
jQuery总体架构的理解分析
2011/03/07 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
JS实现三个层重叠点击互相切换的方法
2015/10/06 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
2017/02/15 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
简单谈谈原生js的math对象
2017/06/27 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
解决百度Echarts图表坐标轴越界的方法
2018/10/17 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
layer.prompt输入层的例子
2019/09/24 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
python 文件操作删除某行的实例
2017/09/04 Python
django的settings中设置中文支持的实现
2019/04/28 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
python实现图片转字符画的完整代码
2021/02/21 Python
安全生产实施方案
2014/02/23 职场文书
骨干教师培训方案
2014/05/06 职场文书
单位消防安全责任书
2014/07/23 职场文书
离婚协议书怎么写
2014/09/12 职场文书
答谢词范文
2015/01/05 职场文书
python 利用PyAutoGUI快速构建自动化操作脚本
2021/05/31 Python