如何获取事件点击的背景颜色

Question

我想得到 background-color 的 div 元素。 我定义了一个句柄click，但它根本不起作用。

这是我的代码：

 <div  className="column" onClick={this.handleClick}>a</div>

---

handleClick(e){
    let a = e.target.style.background; //or backgroundColor  returns nothing.
    console.log(a);
}

我的输出是空的。

我想为我的颜色使用if 声明。例如我的颜色是黑色，我希望得到black 颜色名称。

Answer 1

如果您愿意接受稍微不同的结构：

<div id="column-1" class="column">a</div>

---

$('.column').click(function(e) {
    var bColor = $(this).css('background-color');
    console.log('Background color of this div: '+bColor)
});

对不起，我不使用 reactJS，但希望这足以帮助你。

Answer 2

所以，我在 cmets 中看到你说你正在使用 Reactjs。 有很多方法可以访问元素的样式。 这是其中一种方式：

import React, { PureComponent } from 'react';
import { findDOMNode } from 'react-dom';

    export default class Example extends PureComponent {

     handleClick = () => {
       console.log(findDOMNode(this.El).style.backgroundColor);
     };

     render(){
      return(<div 
          className="column"
          ref={(El) => { this.El = El; }}
          onClick={this.handleClick}
          >
            a
          </div>);
     }
    }

Answer 3

我认为您正在寻找的是getComputedStyle。无论样式如何定义，此函数都可以获取样式。

Answer 4

试试这个：

<div  className="column" onClick={this.handleClick.bind(this)}>a</div>

handleClick = e => {
let a = e.target.style.backgroundColor;
console.log(a);}

Answer 5

首先，如果你想获得你点击的div，你应该使用e.currentTarget而不是e.tartget。

其次，您要使用 CSS 类设置 backgroundColor，这样 div 就没有 style.background 属性。如果你console.log('e.currentTarget') 你可以看到它会被打印出来

 <div className="column">a</div>

如果您使用不同的classNames 设置背景颜色，您可以执行以下操作；

handleClick(e){
    let cName = e.currentTarget.className;
    switch(cName) {
      case 'redBox':
        console.log('It is a red box');
        break;
      case 'blueBox':
        console.log('It is a blue box');
        break;
      default:
        console.log('I don\'t know the exact color');
        break;     
    }
}

Answer 6

使用 jquery 获得类似背景颜色的样式的最简单方法：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Testin script</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<style type="text/css">
    .btn-hot{
        background-color: red;
        color: white; 
    }
</style>
<body>


    <div onclick="get_my_bg_color(this);" style="min-height: 50px;background-color: red;">

    </div>
    <script type='text/javascript'>
        function get_my_bg_color(me){
            console.log($(me)[0].style.backgroundColor);
        }
    </script>

</body>
</html> 

Answer 7

我不清楚你是如何做到这一点的，但看起来你正在使用 React 语法。如果您使用 react 问题可能是在该上下文中 handleClick 方法未绑定到 this。