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数据分享
May 12 Javascript
Node.js模块加载详解
Aug 16 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
Nest.js环境变量配置与序列化详解
Feb 21 Javascript
用JS写一个发布订阅模式
Nov 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
php获取汉字拼音首字母的方法
2015/10/21 PHP
PHP图像裁剪缩略裁切类源码及使用方法
2016/01/07 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Array对象方法参考
2006/10/03 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
在JavaScript中使用JSON数据
2016/02/15 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
微信小程序HTTP接口请求封装的实现
2019/02/21 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
js实现幻灯片轮播图
2020/08/14 Javascript
[00:12]DAC2018 天才少年转战三号位,他的SOLO是否仍如昔日般强大?
2018/04/06 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
深入理解Python中的内置常量
2017/05/20 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
感恩老师演讲稿400字
2014/08/28 职场文书
党性心得体会
2014/09/03 职场文书
四风个人对照检查材料思想汇报(办公室通用版)
2014/10/07 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
2016拓展训练心得体会范文
2016/01/12 职场文书
html5调用摄像头实例代码
2021/06/28 HTML / CSS