jQuery获取样式中的背景颜色属性值/颜色值


Posted in Javascript onDecember 17, 2012

天使用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获取样式表中的属性值
<html> 
<head><title>aaaa</title></head> 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
$(".one > a").click(function(){ 
<SPAN style="COLOR: #ff0000">var ba=$(this)[0].style.background;</SPAN> alert($(this).html()+ba); 
if(ba=="url(jia1.jpg) no-repeat") 
{$(this).css({background:"url(jia.jpg) no-repeat"});} 
else 
$(this).css({background:"url(jia1.jpg) no-repeat"}); 
}); 
}); 
</script> 
<style type="text/css"> 
#left .one a{background:url(jia1.jpg) no-repeat; 
padding-left:18px; 
padding-top:5px; 
cursor:hand; 
} </style> 
<body> 
<div id="left"> 
<img src="lefttop.jpg" /> 
<ul> 
<li class="one"> <a>信息中心 </a> 
<ul> 
<li class="two"> <a href="#">信息?件箱 </a> </li> 
<li class="two"> <a href="#">信息收件箱 </a> </li> 
</ul> 
</li> 
<li class="one"> <a>我要采? </a> </li> 
</ul> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
js实现Select列表各项上移和下移的方法
Aug 14 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
Apr 10 Javascript
JavaScript中的函数式编程详解
Aug 22 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 #Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 #Javascript
javascript中判断一个值是否在数组中并没有直接使用
Dec 17 #Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 #Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 #Javascript
如何让页面在打开时自动刷新一次让图片全部显示
Dec 17 #Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 #Javascript
You might like
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
PHP微信网页授权的配置文件操作分析
2019/05/29 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery实现的网页左侧在线客服效果代码
2015/10/23 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
python获取糗百图片代码实例
2013/12/18 Python
Python判断操作系统类型代码分享
2014/11/22 Python
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
Java如何调用外部Exe程序
2015/07/04 面试题
小学教师师德反思
2014/02/03 职场文书
粗加工管理制度
2014/02/04 职场文书
学校课外活动总结
2014/05/08 职场文书
歌咏比赛主持词
2015/06/29 职场文书
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS