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实现tab标签浏览效果
Feb 20 Javascript
JavaScript 捕获窗口关闭事件
Jul 26 Javascript
Javascript 二维数组
Nov 26 Javascript
Javascript解决常见浏览器兼容问题的12种方法
Jan 04 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
使用form-create动态生成vue自定义组件和嵌套表单组件
Jan 18 Javascript
快速解决vue2+vue-cli3项目ie兼容的问题
Nov 17 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
怎么清空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基础知识:控制结构
2006/12/13 PHP
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
destoon各类调用汇总
2014/06/20 PHP
yii用户注册表单验证实例
2015/12/26 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
JavaScript中this详解
2015/09/01 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
webpack打包node.js后端项目的方法
2018/03/10 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python操作mysql代码总结
2018/06/01 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
Fresh馥蕾诗英国官网:法国LVMH集团旗下高端天然护肤品牌
2018/11/01 全球购物
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
.net工程师笔试题
2012/06/09 面试题
领导的自我鉴定
2013/12/28 职场文书
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
2019入党申请书范文3篇
2019/08/21 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers