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 得到变量类型的函数
May 19 Javascript
jquery中通过过滤器获取表单元素的实现代码
Jul 05 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
Dec 14 Javascript
JQuery和HTML5 Canvas实现弹幕效果
Jan 04 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
Mar 13 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
vue实现图片按比例缩放问题操作
Aug 11 Javascript
如何实现小程序与小程序之间的跳转
Nov 04 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
Ajax PHP分页演示
2007/01/02 PHP
PHP 判断变量类型实现代码
2009/10/23 PHP
PHP 函数学习简单小结
2010/07/08 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP数据流应用的一个简单实例
2012/09/14 PHP
深入密码加salt原理的分析
2013/06/06 PHP
php用header函数实现301跳转代码实例
2013/11/25 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
需灵活掌握的Bootstrap预定义排版类 你精通吗?
2016/06/20 Javascript
Javascript的比较汇总
2016/07/25 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
swiper自定义分页器使用方法详解
2020/09/14 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
解决python3中解压zip文件是文件名乱码的问题
2018/03/22 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
测量实习生自我鉴定
2013/09/19 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
群众路线党课主持词
2014/04/01 职场文书
机械工程及自动化专业求职信
2014/09/03 职场文书
党员学习党的群众路线思想汇报(5篇)
2014/09/10 职场文书
机关作风建设心得体会
2014/10/22 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
家长高考寄语
2015/02/27 职场文书
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python