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 相关文章推荐
图像替换新技术 状态域方法
Jan 28 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
浅谈JS函数定义方式的区别
Oct 30 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
Jun 06 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
Aug 14 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中批量修改文件后缀名的函数代码
2011/10/23 PHP
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
php 基础函数
2017/02/10 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
Vue实现动态显示textarea剩余字数
2017/05/22 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
2017/08/24 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
vue使用map代替Aarry数组循环遍历的方法
2020/04/30 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
Python实现XML文件解析的示例代码
2018/02/05 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
PyTorch上实现卷积神经网络CNN的方法
2018/04/28 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
基于Python实现扑克牌面试题
2019/12/11 Python
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
公务员个人考察材料
2014/12/23 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript