博客

如何使用jQuery获得被点击的分部的背景颜色

  • Post category:jquery

使用jQuery获取被点击元素的背景颜色的主要步骤如下：

  1. 给需要获取背景颜色的元素添加点击事件监听器。可以使用jQuery的click()方法绑定事件。
  2. 在点击事件的回调函数中获取被点击元素的背景颜色。可以使用jQuery的css()方法获取元素的CSS属性。
  3. 可以将获取到的背景颜色值存储在全局变量中，或者进行其他自定义操作。

下面是详细的示例说明：

示例1：

HTML部分：

<div id="div1" style="background-color: red; height: 100px;"></div>
<div id="div2" style="background-color: blue; height: 100px;"></div>

JS部分：

var clickedColor = null;

$('#div1, #div2').click(function() {
  clickedColor = $(this).css('background-color');
  console.log(clickedColor);
});

解释：

上面的代码中，先定义了全局变量clickedColor，用来存储被点击元素的背景颜色。然后使用jQuery的click()方法，给div1和div2两个元素绑定了一个共同的点击事件监听器。在点击事件的回调函数中，通过this来获取当前被点击的元素，使用jQuery的css()方法获取元素的background-color属性的值，并将其赋值给clickedColor变量。最后，使用console.log()方法把获取到的颜色值输出到控制台。

示例2：

HTML部分：

<ul>
  <li class="item" style="background-color: red;">Item 1</li>
  <li class="item" style="background-color: blue;">Item 2</li>
</ul>

JS部分：

$('.item').click(function() {
  var bgColor = $(this).css('background-color');
  $(this).append('<span>Clicked color is ' + bgColor + '</span>');
});

解释：

上面的代码中，首先选中了所有类名为item的元素，给它们绑定了一个点击事件监听器。在点击事件的回调函数中，使用jQuery的css()方法获取当前被点击元素的背景颜色，并将其存储在变量bgColor中。然后通过jQuery的append()方法，在被点击元素的末尾添加一个span元素，用来显示当前点击元素的背景颜色。

Tags: