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 位置插件
Dec 25 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
JS作用域深度解析
Dec 29 Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
vue使用echarts图表的详细方法
Oct 22 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 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/08/20 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
ThinkPHP框架任意代码执行漏洞的利用及其修复方法
2014/07/04 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
Dom操作之兼容技巧分享
2011/09/20 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
2016/07/25 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
2020/05/26 Javascript
python用10行代码实现对黄色图片的检测功能
2015/08/10 Python
python实现机器人行走效果
2018/01/29 Python
python对html过滤处理的方法
2018/10/21 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
毕业生多媒体设计求职信
2013/10/12 职场文书
九年级政治教学反思
2014/02/06 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
买房委托公证书
2014/04/08 职场文书
关于感恩的演讲稿200字
2014/08/26 职场文书
教师四风问题整改措施
2014/09/25 职场文书