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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
js操作数组函数实例小结
Dec 10 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
JavaScript常用内置对象用法分析
Jul 09 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
Sep 24 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
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php中的filesystem文件系统函数介绍及使用示例
2014/02/13 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
在SAE上搭建最新wordpress的方法
2014/12/21 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
2016/05/03 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
webstorm添加vue.js支持的方法教程
2017/07/05 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
2017/11/02 Javascript
js动态引入的四种方法
2018/05/05 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Python实现树莓派WiFi断线自动重连的实例代码
2017/03/16 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
Python八皇后问题解答过程详解
2019/07/29 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
深入理解css中vertical-align属性
2017/04/18 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
施工安全生产承诺书
2014/05/23 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis