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 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 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连接mysql数据库代码
2009/03/10 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
原生JS实现随机点名项目的实例代码
2019/04/30 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
2019/10/11 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
python网络编程之文件下载实例分析
2015/05/20 Python
python类和继承用法实例
2015/07/07 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
python 构造三维全零数组的方法
2018/11/12 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
2014教师研修学习体会
2014/07/08 职场文书
组工干部对照检查材料
2014/08/25 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
大学生个人学习总结
2015/02/15 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python