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 相关文章推荐
DB.ASP 用Javascript写ASP很灵活很好用很easy
Jul 31 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
JS实现提示框跟随鼠标移动
Aug 27 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
javascript Canvas动态粒子连线
Jan 01 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
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
详解PHP中的外观模式facade pattern
2018/02/05 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
javascript 特殊字符串
2009/02/25 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
微信小程序模版渲染详解
2018/01/26 Javascript
深入浅析AngularJs模版与v-bind
2018/07/06 Javascript
微信小程序实现分享商品海报功能
2019/09/30 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
详解python中list的使用
2019/03/15 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
基于 HTML5 Canvas实现 的交互式地铁线路图
2018/03/05 HTML / CSS
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
万得城电器土耳其网站:欧洲第一大电子产品零售商
2016/10/07 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
财政专业求职信范文
2014/02/19 职场文书
大学社团计划书
2014/05/01 职场文书
食品安全处置方案
2014/06/14 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014年小学语文工作总结
2014/12/20 职场文书
长江七号观后感
2015/06/11 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android