如何使用 jQuery 获取点击分区的背景颜色？

在本文中，我们将学习如何使用 jQuery 获取被点击的分区的背景颜色。

方法：首先使用通用选择器选择页面上的所有分区，然后应用点击绑定以使用click()方法触发颜色检测。然后可以通过将其用作选择器来找到当前单击的分区。

jQuery 中的css()方法用于获取和设置使用它的元素的计算样式。它接受两个参数，其中第一个参数定义我们需要获取或设置样式的样式，第二个参数定义它必须设置的值。我们可以使用此方法通过将参数作为“background-color”传递来获取当前颜色以获取当前背景颜色。然后可以将其显示为 RGB 值中的文本或分配给另一个元素。

句法：

$(".box").click(function () {

  // Get the current background color
  let current_color = 
    $(this).css("background-color");

  // Show the color text
  $(".current-color-text").text(current_color);

  // Show the color itself
  $(".current-color").css(
    "background-color", current_color
  );
});

以下示例说明了上述方法：

例子：

HTML

  
  
  
    .container {
      display: flex;
    }
 
    .box {
      height: 125px;
      width: 125px;
      margin-right: 16px;
    }
 
    .yellowgreen-bg {
      background-color: yellowgreen;
    }
 
    .orangered-bg {
      background-color: orangered;
    }
 
    .slateblue-bg {
      background-color: slateblue;
    }
 
    .gold-bg {
      background-color: gold;
    }
 
    .current-color {
      height: 75px;
      width: 75px;
    }
  

 

  
    GeeksforGeeks
  
  How to get the background color of a
    clicked division using jQuery?
   

    Click on any division to get its
    background color
  
 
 
 
  
     
    
    
    
    
    
  
 
   
The clicked division's background color is:
 
  
  
  
 
  
    $(".box").click(function () {
 
      // Get the current background color
      // using the css() method
      let current_color =
          $(this).css("background-color");
 
      // Show the color text
      $(".current-color-text").text(
        current_color
      );
 
      // Show the color itself
      $(".current-color").css(
        "background-color", current_color
      );
    });
  

输出：