Question

我正在尝试单击它以获取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>```

Answer 1

您可以使用以下函数转换值。

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]);
}

更多reference

Answer 2

请尝试使用此功能。

function RGB2Color(r,g,b)
{
  return '#' + this.byte2Hex(r) + this.byte2Hex(g) + this.byte2Hex(b);
}

function byte2Hex (n)
{
  var nybHexString = "0123456789ABCDEF";
  return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

Answer 3

您可以编写一个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

Answer 4

您可以尝试

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);
}

进一步访问Github Repo

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

4 个答案: