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 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
基于Bootstrap仿淘宝分页控件实现代码
Nov 07 Javascript
JavaScript利用正则表达式替换字符串中的内容
Dec 12 Javascript
微信小程序自定义select下拉选项框组件的实现代码
Aug 28 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 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
比较全的PHP 会话(session 时间设定)使用入门代码
2008/06/05 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
jQuery的学习步骤
2011/02/23 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
浅谈React Event实现原理
2018/09/20 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
2018/11/26 Javascript
JS实现的自定义map方法示例
2019/05/17 Javascript
JS数据类型判断的几种常用方法
2020/07/07 Javascript
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python decimal模块使用方法详解
2020/06/08 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
python跨文件使用全局变量的实现
2020/11/17 Python
MySQL面试题目集锦
2016/04/14 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
学年末自我鉴定
2014/01/21 职场文书
八年级美术教学反思
2014/02/02 职场文书
品牌宣传方案
2014/03/21 职场文书
拔河比赛口号
2014/06/10 职场文书
商务经理岗位职责
2014/08/03 职场文书
三好学生先进事迹材料
2014/08/28 职场文书
优秀团员个人总结
2015/02/26 职场文书
2015年司机工作总结
2015/04/23 职场文书
2015年调度员工作总结
2015/04/30 职场文书
学习新党章心得体会2016
2016/01/15 职场文书
css布局巧妙技巧之css三角示例的运用
2022/03/16 HTML / CSS
numpy array找出符合条件的数并赋值的示例代码
2022/06/01 Python