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 相关文章推荐
解决使用attachEvent函数时,this指向被绑定的元素的问题的方法
Aug 13 Javascript
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
element-ui 实现响应式导航栏的示例代码
May 08 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
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
Jquery通过Ajax访问XML数据的小例子
2013/11/18 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
AngularJs Dependency Injection(DI,依赖注入)
2016/09/02 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
学习React中ref的两个demo示例
2018/08/14 Javascript
微信小程序中上传图片并进行压缩的实现代码
2018/08/28 Javascript
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解Python中dict与set的使用
2015/08/10 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
使用tensorflow实现AlexNet
2017/11/20 Python
详解python3中tkinter知识点
2018/06/21 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python求解正态分布置信区间教程
2019/11/20 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python中编写函数并调用的知识点总结
2021/01/13 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
竞选班长演讲稿
2013/12/30 职场文书
幼儿园教育教学反思
2014/01/31 职场文书
高中教师考核方案
2014/05/18 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
关于职业道德的心得体会
2016/01/18 职场文书