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 相关文章推荐
javascript中利用数组实现的循环队列代码
Jan 24 Javascript
Javascript表格翻页效果的具体实现
Oct 05 Javascript
jQuery定义背景动态切换效果的方法
Mar 23 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 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强制下载文件函数
2016/08/24 PHP
PHP对象实例化单例方法
2017/01/19 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
javascript的this关键字详解
2019/05/20 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Node.js 实现抢票小工具 & 短信通知提醒功能
2019/10/22 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
Python实现的Excel文件读写类
2015/07/30 Python
浅谈django中的认证与登录
2016/10/31 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
Django使用Celery加redis执行异步任务的实例内容
2020/02/20 Python
使用python修改文件并立即写回到原始位置操作(inplace读写)
2020/06/28 Python
python list的index()和find()的实现
2020/11/16 Python
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
文员岗位职责范本
2014/03/08 职场文书
安全标语口号
2014/06/09 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
文明倡议书
2015/01/19 职场文书
通讯稿范文
2015/07/22 职场文书
员工担保书范本
2015/09/22 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
vue封装数字翻牌器
2022/04/20 Vue.js