jquery实现将获取的颜色值转换为十六进制形式的方法


Posted in Javascript onDecember 20, 2014

本文实例讲述了jquery实现将获取的颜色值转换为十六进制形式的方法。分享给大家供大家参考。具体分析如下:

大家或许已经注意到了,在谷歌、火狐和IE8以上浏览器中,获取的颜色值是RGB形式,例如rgb(255,255,0),感觉非常不适应,或者在实际编码中不方便使用,这个时候就需要进行转换,下面就提供一段相关转换代码。

具体代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="https://3water.com/" /> 

<title>颜色格式转换-三水点靠木</title>  

<style type="text/css"> 

#thediv 

{ 

  width:200px; 

  height:100px; 

  background-color:#CCC; 

  line-height:100px; 

  text-align:center; 

  color:#60F; 

} 

</style> 

<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$.fn.getHexBackgroundColor=function(id,property) 

{  

  var rgb=$(id).css(property);  

  if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit) 

  {  

    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;  

}  

$(document).ready(function(){  

  $("#bt").click(function(){ 

    $("#thediv").text($.fn.getHexBackgroundColor("#thediv","color"))  

  }) 

}) 

</script>  

</head> 

<body> 

<div id="thediv">三水点靠木</div> 

<input type="button" value="点击查看效果" id="bt" /> 

</body> 

</html>

注意:运行编辑器之后,再按F5刷新网页即可查看演示。

以上代码实现了我们的要求,可以将RGB格式的颜色值转换为十六进制形式,下面就简单介绍一下实现过程:

一.实现原理:

当点击按钮的会触发click事件,进而执行click事件处理函数,此处理函数能够将转换后的颜色值写入div中去,其中的核心函数就是getHexBackgroundColor(),此函数首先会判断浏览器是否是IE9之下,如果是则直接返回颜色值,不进行转换,因为在IE9以下浏览器获取的颜色值就是16进制的,如果是IE8以上浏览器或者谷歌火狐,则需要进行转换,关于转换细节这里就不多介绍了,可以参考你代码注释。

二.代码注释:

1.$.fn.getHexBackgroundColor=function(id,property){},声明一个函数,此函数可以可以进行颜色值转换,此函数具有两个参数,第一个参数是元素的id属性值,第二个是属性。

2.var rgb=$(id).css(property),获取颜色值,这个时候rgb也许是16进制也许是RGB格式的。

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit),判断浏览器是否是IE8以上或者是火狐或者谷歌浏览器。

4.rgb=rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/),这个要对正则表达式有所了解,通过match()函数可以将颜色值字符串生成一个数组,这个数组中有4个元素,以rgb(102, 0, 255)作为例子,第一个元素是整个颜色值字符串rgb(102, 0, 255),第二个数组元素是102,第三个是0,第四个是255。

5.function hex(x){},声明一个函数,此函数可以用就是进行颜色值转换,具有一个参数,传递的是rgb数组的某一项。

6.return ("0"+parseInt(x).toString(16)).slice(-2),可以将传入数值转换为16进制,注意前面是添加了一个0,最好使用slice函数截取最后两个字符,并返回截取的这两个字符。

7.rgb="#"+hex(rgb[1])+hex(rgb[2])+hex(rgb[3]),将值组合起来。

8.return rgb,返回rgb这个值。

9.$(document).ready(function(){}),当文档结构完全加载完毕再去执行函数中的代码。

10.$("#bt").click(function(){}),为按钮注册click事件处理桉树。

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) ,将转换后的颜色值写入div。

三.相关阅读:

1.浏览器版本判断可以参阅《JavaScript 判断浏览器类型及版本》。
2. parseInt()函数可以参阅《javascript中parseInt()函数的定义和用法分析》。
3.toString()函数可以参阅《javascript中Number对象的toString()方法分析》。
4.slice()函数可以参阅《javascript中String对象的slice()方法分析》。
5.click事件可以参阅《jQuery中click事件的定义和用法》。
6.text()函数可以参阅《jQuery的text()方法用法分析》。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
Jan 13 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
Jul 26 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
JavaScript动态生成表格的示例
Nov 02 Javascript
前端JavaScript大管家 package.json
Nov 02 Javascript
jQuery的text()方法用法分析
Dec 20 #Javascript
jQuery中click事件的定义和用法
Dec 20 #Javascript
javascript中String对象的slice()方法分析
Dec 20 #Javascript
javascript中Number对象的toString()方法分析
Dec 20 #Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 #Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
Dec 20 #Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 #Javascript
You might like
分享下php5类中三种数据类型的区别
2015/01/26 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
第九章之路径分页标签与徽章组件
2016/04/25 Javascript
js获取Get值的方法
2016/09/29 Javascript
js实现图片360度旋转
2017/01/22 Javascript
浅谈在vue项目中如何定义全局变量和全局函数
2017/10/24 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
jQuery实现的回车触发按钮事件功能示例
2018/03/25 jQuery
vue.js使用v-if实现显示与隐藏功能示例
2018/07/06 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
openlayers 3实现车辆轨迹回放
2020/09/24 Javascript
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python实现定时发送qq消息
2019/01/18 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
python如何保存文本文件
2020/06/07 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
材料物理专业个人求职信
2013/12/15 职场文书
物流合作计划书
2014/01/10 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
低碳环保演讲稿
2014/08/28 职场文书
学习群众路线的心得体会
2014/11/05 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
让生命充满爱观后感
2015/06/08 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
4种非常实用的python内置数据结构
2021/04/28 Python
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python