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 相关文章推荐
Jquery中获取iframe的代码
Jan 11 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
JS实现电商放大镜效果
Aug 24 Javascript
Vuex入门到上手教程
Jun 20 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
May 20 Javascript
微信小程序动态设置图片大小的方法
Nov 21 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
JS删除数组指定值常用方法详解
Jun 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
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
javascript插入样式实现代码
2012/02/22 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
vue浏览器返回监听的具体步骤
2021/02/03 Vue.js
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
用python拟合等角螺线的实现示例
2019/12/27 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python的reverse函数翻转结果为None的问题
2020/05/11 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
在职人员函授期间自我评价分享
2013/11/08 职场文书
求职简历推荐信范文
2013/12/02 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
大学生实习证明范本
2014/09/19 职场文书
教师见习报告范文
2014/11/03 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技