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 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
Jun 21 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 Javascript
前端vue如何使用高德地图
Nov 05 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 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文件读取功能的应用实例
2015/05/08 PHP
php基础教程
2015/08/26 PHP
dojo 之基础篇(二)之从服务器读取数据
2007/03/24 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
2011/03/01 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
js利用正则表达式检验输入内容是否为网址
2016/07/05 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
基于Vue制作组织架构树组件
2017/12/06 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
jQuery实现购物车的总价计算和总价传值功能
2018/11/28 jQuery
利用React Router4实现的服务端直出渲染(SSR)
2019/01/07 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python实现画一颗树和一片森林
2018/06/25 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
python实现超市商品销售管理系统
2019/11/22 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
李维斯法国官网:Levi’s法国
2019/07/13 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
项目建议书格式
2014/03/12 职场文书
高中课前三分钟演讲稿
2014/09/13 职场文书
医院党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
2015年工程师工作总结
2015/04/30 职场文书
天那边观后感
2015/06/09 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏