jquery如何将获取的颜色值转换为十六进制形式
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如何将获取的颜色值转换为十六进制形式的更多相关文章
- jquery获取css颜色值返回RGB应用
我来给大家介绍一下在jquery获取css颜色值返回RGB方法,希望此文章对各位同学会有所帮助哦. 代码如下: 代码如下 复制代码 a, a:link, a:visited { color:#4 ...
- iOS 4s-6Plus屏幕自动适配及颜色转换为十六进制
iOS各种屏幕自动适配及颜色转换为十六进制 ★★★XLJMatchScreen自动适配屏幕★★★ 支持pod导入 pod 'XLJScreenMatching', '~> 1.0.3' 如果发现 ...
- 中文字符串转换为十六进制Unicode编码字符串
package my.unicode; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Uni ...
- jquery选择器 之 获取父级元素、同级元素、子元素
jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...
- 【jQuery 使用】 利用jQuery.prop("outerHTML")获取包含自身在内的HTML元素的HTML代码
jQuery.html() 是获取当前节点下的html代码,并不包含当前节点本身的代码,然而我们有时候的确需要,可以通过jQuery.prop("outerHTML")的方式设置. ...
- 关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配。”的解决办法
关于jquery html()方法获取带有OBJECT标签的元素内容时,出现“类型不匹配.”的解决办法 解决办法: $("selector").clone().html()
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- jquery通过ajax获取数据,控制显示的数据条数
效果图: 现在我们可以先看它的json数据,如图所示: 然后可以对应我们的代码进行理解. jquery通过ajax获取数据,并通过窗口大小控制显示的数据条数,以及可以根据 ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
随机推荐
- -_-#【RequireJS】Define a Module
define({ color: 'black', size: 'unisize' }) define(function() { // Do setup work here return { color ...
- slf4j简介
SLF4J不是日志框架而是一个简单日志门面,它的目的是允许最终用户在部署时使用期望的日志框架. The Simple Logging Facade for Java (SLF4J) serves as ...
- 从JavaScript的移位运算看数字在计算机内部的编码——补码
偶然看到一个JavaScript的题目: js中13>>2=? -13>>2=? 在浏览器中很容易测试出答案分别是 3 和 -4. 13>>2 = 3 很 ...
- C++程序原码
直接插入排序基本算法 #include<iostream.h> #include<stdlib.h> #include<time.h> const int n=10 ...
- Fill-倒水问题(Uva-10603-隐式图路径寻找问题)
原题:https://uva.onlinejudge.org/external/106/10603.pdf 有三个没有刻度的杯子,它们的容量分别是a, b, c, 最初只有c中的杯子装满水,其他的被子 ...
- 英蓓特Mars board的android4.0.3源码编译过程
英蓓特Mars board的android4.0.3源码编译过程 作者:StephenZhu(大桥++) 2013年8月22日 若要转载,请注明出处 一.编译环境搭建及要点: 1. 虚拟机软件virt ...
- ss sp行情
SS Securities Standard SP Securities Premium 優行情質 Securities Standard (SS), Premium (SP), FullTick S ...
- Delphi图像处理 -- RGB与HSV转换
阅读提示: <Delphi图像处理>系列以效率为侧重点,一般代码为PASCAL,核心代码采用BASM. <C++图像处理>系列以代码清晰,可读性为主,全部使用C ...
- lucene4.0与之前版本的一些改变
最近在用lucene4.0,因为之前也没用过lucene其它版本,所以也不是很熟悉.但每次上网查资料代码的时候,总发现网友们贴的代码都是之前的版本的.当我拷贝过来的时候总会出问题,去查API的时候,总 ...
- 如何由XSD自动生成XML和实体类
项目中有时候要用XML作为数据源,因此需要定义XML文件和相应的类,最佳方法是首先定义XSD,然后自动生成实体类,最后生成XML和填充数据:读取XML数据源的时候,首先用XSD验证XML数据格式,然后 ...