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

所以，我在评论中读到你说你正在使用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

试试这个：

var myData = [{
  "Date": "09/17/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/18/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/19/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/20/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "09/21/2013",
  "Target": "386",
  "Actual": "346",
  "Progress": "89.77"
}, {
  "Date": "10/02/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/03/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/04/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/05/2013",
  "Target": "419",
  "Actual": "346",
  "Progress": "82.52"
}, {
  "Date": "10/06/2013",
  "Target": "438",
  "Actual": "370",
  "Progress": "84.55"
}];

nv.addGraph(function() {

  // Catch data from Target column.
  var result = [];
  for (var i = 0; i < myData.length; i++) {
    result.push({
      x: (new Date(myData[i].Date)),
      y: myData[i].Target
    });
  }

  // Catch data from Actual column.
  var result1 = [];
  for (var i = 0; i < myData.length; i++) {
    result1.push({
      x: (new Date(myData[i].Date)),
      y: myData[i].Actual
    });
  }

  // Combine two series together.
  a = [{
    key: 'Target',
    "bar": true,
    color: '#ff7f0e',
    values: result
  }, {
    key: 'Actual',
    color: '#007f0e',
    values: result1
  }].map(function(series) {
    series.values = series.values.map(function(d) {
      return {
        x: d.x,
        y: d.y
      }
    });
    return series;
  });

  // Define chart.
  var chart = nv.models.linePlusBarWithFocusChart()
    .margin({
      top: 30,
      right: 60,
      bottom: 50,
      left: 70
    })
    .x(function(d, i) {
      if (d.x > 0) {
        return d.x;
      }
    })
    .color(d3.scale.category10().range());

  // Determine the first x axis data labels.
  chart.xAxis.tickFormat(function(d) {
    // Convert gregorian date to persian date.
    return d3.time.format("%d-%m-%y")(new Date(d))
  });

  // Determine the seconde x axis data labels.
  chart.x2Axis.tickFormat(function(d) {
    return d3.time.format("%d-%m-%y")(new Date(d))
  });

  // Determine the y axises data labels format.
  chart.y1Axis
    .tickFormat(d3.format(',f'));

  chart.y3Axis
    .tickFormat(d3.format(',f'));

  // Add chart to page.  
  nv.log(a);
  d3.select('#chart1 svg')
    .datum(a)
    .call(chart);

  nv.utils.windowResize(chart.update);
});

Answer 5

首先，如果您希望获得点击的div，则应使用e.currentTarget而不是e.tartget。

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

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

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

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获取样式的最简单方法就像background-color：

<!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方法在那个上下文中没有绑定到它。

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

7 个答案: