Question

我有一个HTML div，如下所示

facility_section

以及相同的CSS，如下所示

issued_to

现在我想在点击时获取div的颜色（默认为红色），使用以下代码，

UPDATE tbl_A
 SET assigned_no = assigned_no + 1
 WHERE facility_section = '$facility_section'

这不起作用。在我输入调试器之后，我看到e.target只给了我没有CSS属性的div。如何获得所点击的div的颜色？

Answer 1

试试这个

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

或

$(e.target).css("background-color");

Answer 2

使用jquery对象$（this）选择您单击的元素，然后使用jquery方法.css（）获取您需要的任何属性。

$(".color-rect").click(function(e){
    //e.target.attr("background-color");
    console.log($(this).css("background-color"));
});

这是一个完整的演示小提琴。 JS Fiddle demonstration

Answer 3

e.target为您提供了Html元素，$(e.target)为您提供了jquery访问者，然后您可以background-color查询css属性

＆＃13;

$(".color-rect").click(function(e){
        console.log($(e.target).css('background-color'));
  
    });

＆＃13;

.color-rect {
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 20px;
    margin: 20px;
    position: relative;
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
        <div class="color-rect"></div>
        <div class="color-rect"></div>
        <div class="color-rect"></div>
</div>

＆＃13;

Answer 4

试试这个

$(".color-rect").click(function(e){
    var color = $(this).css("background-color");
});

jsfiddle

Answer 5

由于您已经在使用jQuery，因此可以使用.css，如下所示：

console.log($(this).css('backgroundColor'));

这为您提供了颜色的rgb值。

Working jsfiddle

Answer 6

有两种方法可以实现这一目标。

Javascript

var cs = document.defaultView.getComputedStyle(e.target,null);
alert(cs.getPropertyValue('background-color'));

<强>的jQuery

alert($(this).css('background-color'));

请参阅下面的演示。

＆＃13;

$(".color-rect").click(function(e){
    var cs = document.defaultView.getComputedStyle(e.target,null);
    alert(cs.getPropertyValue('background-color'));
    alert($(this).css('background-color'));
});

＆＃13;

.color-rect {
    width: 100px;
    height: 100px;
    background-color: red;
    padding: 20px;
    margin: 20px;
    position: relative;
    float: left;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-class">
    <div class="color-rect"></div>
    <div class="color-rect"></div>
    <div class="color-rect"></div>
</div>

＆＃13;

如何获取返回div的颜色属性？

6 个答案: