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 ajax属性async(同步异步)示例
Nov 05 Javascript
JQuery获取表格数据示例代码
May 26 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
jquery zTree异步加载简单实例讲解
Feb 25 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
Bootstrap CSS布局之列表
Dec 15 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 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自动判断字符集并转码的详解
2013/06/26 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
sails框架的学习指南
2014/12/22 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
Javascript的比较汇总
2016/07/25 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
jQuery简介_动力节点Java学院整理
2017/07/04 jQuery
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
vue基础之data存储数据及v-for循环用法示例
2019/03/08 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
Python二叉搜索树与双向链表转换算法示例
2019/03/02 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
我读书我快乐演讲稿
2014/05/07 职场文书
工作简报怎么写
2015/07/21 职场文书
2021-4-5课程——SQL Server查询【3】
2021/04/05 SQL Server
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python