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禁制后退键(Backspace)实例代码
Nov 15 Javascript
Javascript中克隆一个数组的实现代码
Dec 06 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
实例分析javascript中的call()和apply()方法
Nov 28 Javascript
JQuery+EasyUI轻松实现步骤条效果
Feb 22 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
Mar 10 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
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
pdo中使用参数化查询sql
2011/08/11 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
2013/11/29 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
从零开始搭建webpack+react开发环境的详细步骤
2018/05/18 Javascript
详解基于vue的服务端渲染框架NUXT
2018/06/20 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python自定义类并使用的方法
2015/05/07 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
python 两个数据库postgresql对比
2019/10/21 Python
python缩进长度是否统一
2020/08/02 Python
英国男士时尚网站:Dandy Fellow
2018/02/09 全球购物
Ryderwear美国官网:澳大利亚高端健身训练装备品牌
2018/04/24 全球购物
高级Java程序员面试题
2016/06/23 面试题
请假条标准格式规范
2014/04/10 职场文书
运动会加油稿20字
2014/11/15 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
pandas DataFrame.shift()函数的具体使用
2021/05/24 Python
MySQL池化框架学习接池自定义
2022/07/23 MySQL