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 相关文章推荐
juqery 学习之三 选择器 可见性 元素属性
Nov 25 Javascript
Jquery实现带动画效果的经典二级导航菜单
Mar 22 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 Javascript
JavaScript canvas实现跟随鼠标事件
Feb 10 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
2017/05/27 Javascript
JS中跳出循环的示例代码
2017/09/14 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
基于js 字符串indexof与search方法的区别(详解)
2017/12/04 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
python中实现定制类的特殊方法总结
2014/09/28 Python
Python中实现结构相似的函数调用方法
2015/03/10 Python
python实现从字典中删除元素的方法
2015/05/04 Python
Python中扩展包的安装方法详解
2017/06/14 Python
Python如何快速上手? 快速掌握一门新语言的方法
2017/11/14 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
职工运动会邀请函
2014/02/02 职场文书
护士个人自我鉴定
2014/03/24 职场文书
房屋转让协议书
2014/04/11 职场文书
导游个人求职信
2014/04/25 职场文书
劳动竞赛口号
2014/06/16 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
教师批评与自我批评
2014/10/15 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python