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 相关文章推荐
js对象关系图 方便dom操作
Mar 18 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
Dec 30 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
template.js前端模板引擎使用详解
Oct 10 Javascript
javascript 中模板方法单例的实现方法
Oct 17 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
cdn模式下vue的基本用法详解
Oct 07 Javascript
使用Vue实现调用接口加载页面初始数据
Oct 28 Javascript
Vue 自适应高度表格的实现方法
May 13 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
基于mysql的bbs设计(五)
2006/10/09 PHP
php 数组的一个悲剧?
2011/05/11 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
Bootstrap实现带动画过渡的弹出框
2016/08/09 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
javascript中的数据类型检测方法详解
2019/08/07 Javascript
javascript 数组精简技巧小结
2020/02/26 Javascript
vue 项目中当访问路由不存在的时候默认访问404页面操作
2020/08/31 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
详解如何利用Cython为Python代码加速
2018/01/27 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
对python中if语句的真假判断实例详解
2019/02/18 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Python 转换文本编码实现解析
2019/08/27 Python
python fuzzywuzzy模块模糊字符串匹配详细用法
2019/08/29 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
香港礼品网站:GiftU eshop
2017/09/01 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
计算机相关的自我评价
2014/01/15 职场文书
校园之声广播稿
2014/01/31 职场文书
养生餐厅创业计划书范文
2014/03/26 职场文书
高中地理教学反思
2016/02/19 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
浅谈Golang 切片(slice)扩容机制的原理
2021/06/09 Golang
Python中re模块的元字符使用小结
2022/04/07 Python