我来给大家介绍一下在jquery获取css颜色值返回RGB方法,希望此文章对各位同学会有所帮助哦。
代码如下:
代码如下 | 复制代码 |
a, a:link, a:visited { color:#4188FB; } |
js代码如下:
代码如下 | 复制代码 |
var link_col = $("a:link").css("color"); |
jquey貌似设置颜色,使用的是rgb格式的。
用以下这个function,把rgb转成“#xxxx”(HEX )格式。
代码如下 | 复制代码 |
|
或者用这个function
代码如下 | 复制代码 |
|
补充一下
获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示【#ffff00】,而IE10,、Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】,由于需要对颜色值进行判断处理,所以需要得到统一的颜色格式,最好是HEX格式的,方便处理点。搜索了一下,从国外的一个网站上得到一段代码:
代码如下 | 复制代码 |
|
上面定义的是一个jQuery函数,我们可以通过 $("#bg").getHexBackgroundColor(); 获取到标签id="bg"的background-color的RGB值。
下面做一下小小的修改,就是加一个判断,如果是显示HEX值(IE10以下)就直接拿值,如果是非IE浏览器则将值转换成RGB格式:
代码如下 | 复制代码 |
|
本文实例讲述了jQuery获取样式中颜色值的方法。分享给大家供大家参考。具体分析如下:
今天使用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程序设计有所帮助。
1. //十六进制颜色值域RGB格式颜色值之间的相互转换
2.
3. //-------------------------------------
4. //十六进制颜色值的正则表达式
5. var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
6. /*RGB颜色转换为16进制*/
7. String.prototype.colorHex = function(){
8. var that = this;
9. if(/^(rgb|RGB)/.test(that)){
10. var aColor = that.replace(/(?:||rgb|RGB)*/g,"").split(",");
11. var strHex = "#";
12. for(var i=0; i<aColor.length; i++){
13. var hex = Number(aColor[i]).toString(16);
14. if(hex === "0"){
15. hex += hex;
16. }
17. strHex += hex;
18. }
19. if(strHex.length !== 7){
20. strHex = that;
21. }
22. return strHex;
23. else if(reg.test(that)){
24. var aNum = that.replace(/#/,"").split("");
25. if(aNum.length === 6){
26. return that;
27. else if(aNum.length === 3){
28. var numHex = "#";
29. for(var i=0; i<aNum.length; i+=1){
30. numHex += (aNum[i]+aNum[i]);
31. }
32. return numHex;
33. }
34. else{
35. return that;
36. }
37. };
38.
39. //-------------------------------------------------
40.
41. /*16进制颜色转为RGB格式*/
42. String.prototype.colorRgb = function(){
43. var sColor = this.toLowerCase();
44. if(sColor && reg.test(sColor)){
45. if(sColor.length === 4){
46. var sColorNew = "#";
47. for(var i=1; i<4; i+=1){
48. sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
49. }
50. sColor = sColorNew;
51. }
52. //处理六位的颜色值
53. var sColorChange = [];
54. for(var i=1; i<7; i+=2){
55. "0x"+sColor.slice(i,i+2)));
56. }
57. return "RGB(" + sColorChange.join(",") + ")";
58. else{
59. return sColor;
60. }
61. };
2.调用方法
[javascript]
- var sRgb = "RGB(255, 255, 255)" , sHex = "#00538b";
- var sHexColor = sRgb.colorHex();//转换为十六进制方法<code></code>
- var sRgbColor = sHex.colorRgb();//转为RGB颜色值的方法
colorHex()
表示转换为十六进制方法,colorRgb()
表示转为RGB颜色值的方法