jquery - 如何读取任何点击元素的 css 属性？

Question

我试图制作一个 jquery 颜色选择器，它应该读取单击的任何元素的背景颜色并将其返回到 .result div 中。

问题：如何描述“当前点击的”元素？

这是我的代码：

$("p").click(function () {
  var color = $("p").css("background-color");
  $(".result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");
});

我希望这适用于任何被点击的元素，而不仅仅是 p。有没有一种简单的方法可以做到这一点？

Answer 1

$(document).click(function(ev){
  var color = $(ev.target).css("background-color");   
});​

http://jsfiddle.net/tarabyte/9v2rA/

Answer 2

如果您正在谈论一个颜色选择器框，其中包含p代表每种颜色的几个元素，因此您不需要click在任何元素上调度所有事件。您可以使用ps。您可以使用this来引用当前单击的p：

var color = $(this).css("background-color");

所以你的代码将是：

$("p").click(function () {
  var color = $(this).css("background-color");
  $(".result").html("That div is <span style='color:" +
                     color + ";'>" + color + "</span>.");
});

您的 HTML 可能是：

<div class="color-picker">
  <p style="background-color: #111;"></p>
  <p style="background-color: #333;"></p>
  <p style="background-color: #666;"></p>
  <p style="background-color: #999;"></p>
</div>