js 实现颜色值格式转换 rgb和十六进制的转换

js 实现颜色值格式转换 rgb和十六进制的转换本文章是以 prototype 原型的方式 给 string 字符串类型添加方法 用于实现颜色值格式的转换 如果你不用原型方法 那么你只要借鉴实现方法就好了 RGB 转换为 16 进制 String prototype colorHex function RGB 颜色值的正则 varreg rgb RGB varcolor this

本文章是以prototype原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换。

如果你不用原型方法,那么你只要借鉴实现方法就好了。

 

RGB转换为16进制

String.prototype.colorHex = function () { // RGB颜色值的正则 var reg = /^(rgb|RGB)/; var color = this; if (reg.test(color)) { var strHex = "#"; // 把RGB的3个数值变成数组 var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(","); // 转成16进制 for (var i = 0; i < colorArr.length; i++) { var hex = Number(colorArr[i]).toString(16); if (hex === "0") { hex += hex; } strHex += hex; } return strHex; } else { return String(color); } };

使用方法:

"rgb(255,255,255)".colorHex(); // #ffffff

 

16进制转换为RGB

String.prototype.colorRgb = function () { // 16进制颜色值的正则 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; // 把颜色值变成小写 var color = this.toLowerCase(); if (reg.test(color)) { // 如果只有三位的值,需变成六位,如:#fff => #ffffff if (color.length === 4) { var colorNew = "#"; for (var i = 1; i < 4; i += 1) { colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1)); } color = colorNew; } // 处理六位的颜色值,转为RGB var colorChange = []; for (var i = 1; i < 7; i += 2) { colorChange.push(parseInt("0x" + color.slice(i, i + 2))); } return "RGB(" + colorChange.join(",") + ")"; } else { return color; } };

使用方法:

"#fff".colorRgb(); // rgb(255,255,255) "#ffffff".colorRgb(); // rgb(255,255,255)

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/229894.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月16日 下午3:37
下一篇 2026年3月16日 下午3:37


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号