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 相关文章推荐
把html页面的部分内容保存成新的html文件的jquery代码
Nov 12 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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动态生成javascript文件的2个例子
2014/04/11 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP中Static(静态)关键字功能与用法实例分析
2019/04/05 PHP
jquery 双色表格实现代码
2009/12/08 Javascript
jQuery each()小议
2010/03/18 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
jQuery事件多次绑定与解绑问题实例分析
2019/02/19 jQuery
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python Flask-web表单使用详解
2017/11/18 Python
python得到单词模式的示例
2018/10/15 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
在VS2017中用C#调用python脚本的实现
2019/07/31 Python
pip 安装库比较慢的解决方法(国内镜像)
2019/10/06 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
基于python 取余问题(%)详解
2020/06/03 Python
PyTorch安装与基本使用详解
2020/08/31 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
总经理文秘岗位职责
2014/02/03 职场文书
店面销售职位的职责
2014/03/09 职场文书
病媒生物防治方案
2014/05/13 职场文书
社会稳定风险评估方案
2014/06/02 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
公司周年庆典致辞
2015/07/30 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS