jQuery获取样式中颜色值的方法


Posted in Javascript onJanuary 29, 2015

本文实例讲述了jQuery获取样式中颜色值的方法。分享给大家供大家参考。具体分析如下:

今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样,IE中是以HEX格式显示【#ffff00】,而Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】,由于需要将颜色值存储到数据库中,所以想让颜色值的格式统一下(其实不统一也是可以存的)。搜索了一下,从国外的一个网站上得到一段代码:

$.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值。

下面做一下小小的修改,就是加一个判断,如果是IE浏览器就直接拿值,如果是非IE浏览器则将值转换成RGB格式:

$.fn.getHexBackgroundColor = function() {
 var rgb = $(this).css('background-color');
 if(!$.browser.msie){
  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;
}

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
判断ie的两种简单方法
Aug 12 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
JS实现单行文字不间断向上滚动的方法
Jan 29 #Javascript
JS清除选择内容的方法
Jan 29 #Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 #Javascript
JS判断是否360安全浏览器极速内核的方法
Jan 29 #Javascript
jQuery中$.each使用详解
Jan 29 #Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 #Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 #Javascript
You might like
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP goto语句用法实例
2019/08/06 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
jQuery基础_入门必看知识点
2016/07/04 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
angularjs ui-router中路由的二级嵌套
2017/03/10 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
Layui弹出层 加载 做编辑页面的方法
2019/09/16 Javascript
Vue监听滚动实现锚点定位(双向)示例
2019/11/13 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python使用CMD模块更优雅的运行脚本
2015/05/11 Python
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python实现将英文单词表示的数字转换成阿拉伯数字的方法
2015/07/02 Python
python如何统计序列中元素
2020/07/31 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
django配置连接数据库及原生sql语句的使用方法
2019/03/03 Python
Python基于DB-API操作MySQL数据库过程解析
2020/04/23 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
荟萃全球保健品:维他购
2018/05/09 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
市场营销毕业生自荐信
2013/11/23 职场文书
迟到检讨书1000字
2014/01/15 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
发工资啦!教你用Python实现邮箱自动群发工资条
2021/05/10 Python
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
Golang数据类型和相互转换
2022/04/12 Golang
nginx搭建NFS网络文件系统
2022/04/14 Servers