js 實現顏色值格式轉換 rgb和十六進位制的轉換
阿新 • • 發佈：2020-12-09
參考：mossbaoo~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>color拾取器</title> </head> <body> <div>社會主義接班人</div> <input type="color" id="color1"> <input type="color" id="color2"> </body> <script type="text/javascript" charset="utf-8"> /** * 以prototype原型的方式，給string字串型別新增方法，用於實現顏色值格式的轉換。 * * RGB轉換為16進位制 * * 使用方式： * "rgb(255,255,255)".colorHex(); // #ffffff*/ 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); } }; /** * 16進位制轉換為RGB * * 使用方式： * "#fff".colorRgb(); // rgb(255,255,255) * "#ffffff".colorRgb(); // rgb(255,255,255) */ 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; } }; /** ========== 測試分割線 測試分割線 測試分割線 測試分割線 ========== */ var colorsHex = "#ff8080"; var colorsRgb = "rgb(255, 128, 128)" var colors = document.querySelector("#color1").value; console.log(colors); document.querySelector("#color1").onchange = function() { // document.getElementById('color1').click(); // 必須新增觸發click事件否則不能通過點選確定按鈕觸發更改顏色 document.body.style.color = this.value; var bodyColor = document.body.style.color; document.querySelector("#color2").value = bodyColor.colorHex(); console.log(bodyColor); console.log(bodyColor.colorHex()); console.log(document.body.style.color.colorHex()); } </script> </html>