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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
浅谈React之状态(State)
Sep 19 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 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 中文处理技巧
2010/04/25 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
Joomla数据库操作之JFactory::getDBO用法
2016/05/05 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
JavaScript的9个陷阱及评点分析
2008/05/16 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
javascript函数声明和函数表达式区别分析
2014/12/02 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
2017/01/15 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
详解如何在项目中使用jest测试react native组件
2018/02/09 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
一步步教你用python的scrapy编写一个爬虫
2019/04/17 Python
python PyAutoGUI 模拟鼠标键盘操作和截屏功能
2019/08/04 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python里glob模块知识点总结
2021/01/05 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
包装类的功能、种类、常用方法
2012/01/27 面试题
服装设计专业毕业生推荐信
2013/11/09 职场文书
负责人任命书范本
2014/06/04 职场文书
医院节能减排方案
2014/06/13 职场文书
美术学专业求职信
2014/07/23 职场文书
合伙经营协议书范本
2014/09/13 职场文书
学校实习推荐信
2015/03/27 职场文书
导游词之无锡梅园
2019/11/28 职场文书
mysql创建存储过程及函数详解
2021/12/04 MySQL