Question

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

问题：如何描述＆＃34;当前点击的＆＃34;元件？

这是我的代码：

$("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个事件。您可以使用p。您可以使用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>

我如何读取任何单击元素的css属性？

2 个答案: