logo标签列表

如何使用 jQuery 将 RGB 值转换为十六进制颜色？

javascriptjquery
6

我想在点击div时获取其颜色，为此我创建了4个div并为每个div设置了不同的颜色，我想在点击它时获取div的颜色。 我得到的颜色是RGB格式的值，我想要十六进制格式的值，请帮助我。

请告诉我如何使用仅jQuery将我获得的RGB值转换为十六进制值。

<html>

   <head>
      <style>
         #first {
            background-color: red;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #second {
            background-color: green;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #third {
            background-color: yellow;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #fourth {
            background-color: blue;
            height: 50px;
            width: 50px;
            /*display: none;*/
         }

         #flip,
         #slide {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
         }

         #slide {
            padding: 50px;
            display: none;
         }

         p {
            margin-top: 20px;
            padding: 5px;
            border: 2px solid #666;
         }

      </style>

      <script src="jquery/jquery.min.js"></script>
      <script>
         $(document).ready(function() {
            $("button").click(function() {

               $("#first").animate({
                  left: '250px'
               });
               $("#second").animate({
                  left: '200px'
               });
               $("#third").animate({
                  left: '150px'
               });
               $("#fourth").animate({
                  left: '100px'
               });

            });

         });

         $(document).ready(function() {
            $("#flip").click(function() {
               $("#slide").slideToggle("slow");


            });

         });



         $(function() {
            $("div").click(function() {
               var color = $(this).css("background-color");
               $("p").html(color);
            });
         });

      </script>


   </head>

   <body>

      <div id="first" style="position: relative;">

      </div>

      <div id="second" style="position: relative;">

      </div>

      <div id="third" style="position: relative;">

      </div>

      <div id="fourth" style="position: relative;">

      </div>


      <p> </p>
      <button type="button">Event</button>

      <div id="flip">Click To Slide down</div>

      <div id="slide">Welcome To Slide</div>

   </body>

</html>```
2
一切都很好，你能确保在发布之前对代码进行缩进吗？谢谢。 - Ashish Kamble
1
谢谢你，Ashish。我会尽力，确保代码缩进正确。 - shubham
3个回答
3
您可以使用以下函数来转换您的值。
var hexDigits =["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"]; 
var hex= function(x) {
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
 rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

更多参考资料

2
你可以编写一个JavaScript函数，该函数将获取r、g、b值并输出十六进制值。我在以下网站上找到了解决方案：https://campushippo.com/lessons/how-to-convert-rgb-colors-to-hexadecimal-with-javascript-78219fdb。"最初的回答"
var rgbToHex = function(rgb) {
    var hex = Number(rgb).toString(16);
    if (hex.length < 2) {
        hex = "0" + hex;
    }
    return hex;
};

var fullColorHex = function(r, g, b) {
    var red = rgbToHex(r);
    var green = rgbToHex(g);
    var blue = rgbToHex(b);
    return red + green + blue;
};

你可以像以下示例一样使用它：
最初的回答
fullColorHex(10, 20, 30); 
// returns color code 0a141e
0
你可以试试这个。
function rgb2hex(rgb){
 rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
 return "#" +
  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}

更多信息请访问这里

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接