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

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.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="http://www.softwhy.com/mytest/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如何将获取的颜色值转换为十六进制形式的更多相关文章

  1. jquery获取css颜色值返回RGB应用

    我来给大家介绍一下在jquery获取css颜色值返回RGB方法,希望此文章对各位同学会有所帮助哦.   代码如下:  代码如下 复制代码 a, a:link, a:visited { color:#4 ...

  2. iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制

    iOS各种屏幕自动适配及颜色转换为十六进制 ★★★XLJMatchScreen自动适配屏幕★★★ 支持pod导入 pod 'XLJScreenMatching', '~> 1.0.3' 如果发现 ...

  3. 中文字符串转换为十六进制Unicode编码字符串

    package my.unicode; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Uni ...

  4. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  5. 【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码

    jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...

  6. 关于jquery html()方法获取带有OBJECT标签的元素内容时，出现“类型不匹配。”的解决办法

    关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()

  7. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  8. jquery通过ajax获取数据，控制显示的数据条数

    效果图: 现在我们可以先看它的json数据,如图所示:                然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...

  9. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

随机推荐

  1. （转载）用PHP正则表达式清除字符串的空白

    (转载)http://www.chinaz.com/program/2009/0220/67569.shtml 我们经常会处理来自用户输入或从数据库中读取的数据,可能在你的字符串中有多余的空白或制表符 ...

  2. 动态规划(背包问题)：POJ 1742 Coins

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 32955   Accepted: 11199 Descripti ...

  3. 【枚举】Vijos P1496 火柴棒等式 （NOIP2008提高组第二题）

    题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...

  4. C#代码实现隐藏任务栏、开始菜单和禁用任务管理

    一:截图,主要是调用系统接口和更改注册表实现功能 二:代码 using System; using System.Collections.Generic; using System.Linq; usi ...

  5. cf702B Powers of Two

    B. Powers of Two time limit per test 3 seconds memory limit per test 256 megabytes input standard in ...

  6. wcf系列学习5天速成——第三天 分布性事务的使用 有时间再验证下 不同库的操作

    原文地址:http://www.cnblogs.com/huangxincheng/archive/2011/11/06/2238273.html 今天是速成的第三天,再分享一下WCF中比较常用的一种 ...

  7. GPRS

    互动百科http://www.baike.com/wiki/GPRS 百度百科http://baike.baidu.com/link?url=M-ElL_qR1bwzUr7BdrDgN4EzBhYYJ ...

  8. hdu 4579 博弈+区间dp

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4597 #include <cstdio> #include <cstring> ...

  9. poj1017

    一个工厂制造的产品形状都是长方体,它们的高度都是h,长和宽都相等,一共有六个型号,他们的长宽分别为1*1, 2*2, 3*3, 4*4, 5*5, 6*6.这些产品通常使用一个 6*6*h 的长方体包 ...

  10. java 中的反射

    反射技术并不陌生,如何使用 ? 获取到类的全名 即可获取类中所有的信息: 构造.方法.成员变量等: 反射技术好多框架在使用,比如以前我们用jdbc,Class.forName("com.my ...