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 相关文章推荐
firefox中JS读取XML文件
Dec 21 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js实现右键自定义菜单
Dec 03 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
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动态图像的创建
2006/10/09 PHP
php中批量替换文件名的实现代码
2011/07/20 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
对联广告js flash激活
2006/10/19 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
javascript 闭包疑问
2010/12/30 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
2015/04/22 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
JS实现图片预加载之无序预加载功能代码
2017/05/12 Javascript
浅谈gulp创建完整的项目流程
2017/12/20 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
利用aardio给python编写图形界面
2017/08/21 Python
[原创]Python入门教程4. 元组基本操作
2018/10/31 Python
python学生管理系统
2019/01/30 Python
Python中Numpy mat的使用详解
2019/05/24 Python
Python3批量生成带logo的二维码方法
2019/06/24 Python
Python对列表的操作知识点详解
2019/08/20 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Vans奥地利官方网站:美国原创极限运动潮牌
2018/09/30 全球购物
市场营销大学生职业规划书
2014/02/25 职场文书
职业生涯规划书前言
2014/04/15 职场文书
党支部四风整改方案
2014/10/25 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
聘任证明怎么写
2015/03/02 职场文书
家长对学校的意见和建议
2015/06/03 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书