我想获得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
颜色名称。
答案 0 :(得分:0)
如果您对结构略有不同:
<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,但希望这足以帮助你。
答案 1 :(得分:0)
所以,我在评论中读到你说你正在使用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>);
}
}
答案 2 :(得分:0)
我认为你要找的是getComputedStyle
。无论定义的样式如何,此函数都可以获得样式。
答案 3 :(得分:0)
试试这个:
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);
});
答案 4 :(得分:0)
首先,如果您希望获得点击的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;
}
}
答案 5 :(得分:0)
使用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>
答案 6 :(得分:-2)
我不清楚你是如何做到这一点的,但是看起来你正在使用React语法。如果你正在使用react,问题可能是handleClick方法在那个上下文中没有绑定到它。