在angular2上单击div来更改另一个div的背景颜色 [英] Change another div's background color on click of div with angular2
本文介绍了在angular2上单击div来更改另一个div的背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在页面上有一个组件,它包含以下div:
< div style =width:400; height: 400; float:left>
< div style =background-color:red; width:50%; height:50%; float:left>
< / div>
< div style =background-color:blue; width:50%; height:50%; float:right>
< / div>
< div style =background-color:green; width:50%; height:50%; float:left>
< / div>
< div style =background-color:orange; width:50%; height:50%; float:right>
< / div>
< / div>
我在同一页面有另一个div
< div class =eventBox eventBox__colorBar>< / div>
当我点击上面的任何一个div时,我想获得选定的颜色并作为第二格的背景颜色。
如何处理angular2?
解决方案
您可以使用以下代码
< div>
< div style =background-color:red; width:50%; height:50%; (点击)= readColor($事件) > XYZ< / DIV>
< div style =background-color:blue; width:50%; height:50%; float:right(click)=readColor($ event)>蓝色< / div>
< div style =background-color:green; width:50%; height:50%; float:left(click)=readColor($ event)> green< / div>
< div style =background-color:orange; width:50%; height:50%; float:right(click)=readColor($ event)> black< / div>< / DIV>< / DIV>
< div [style.background-color] =color>一些文字在这里< / div>
< / div>
打字稿方法
readColor(value){
this.color = value.srcElement.style ['background-color'];
console.log(value.srcElement.style ['background-color']);
}
I have a component on the page which has following divs
<div style=" width:400; height:400; float:left">
<div style="background-color:red; width:50%; height:50%; float:left">
</div>
<div style="background-color:blue; width:50%; height:50%; float:right">
</div>
<div style="background-color:green; width:50%; height:50%; float:left">
</div>
<div style="background-color:orange; width:50%; height:50%; float:right">
</div>
</div>
I have another div on the same page as
<div class="eventBox eventBox__colorBar"></div>
When i click on any of the div above, i want to get the selected color and apply as a background-color for the 2nd div.
How to do with angular2?
解决方案
You can use the below code
<div>
<div style="background-color:red; width:50%; height:50%;" (click)="readColor($event)"> XYZ</div>
<div style="background-color:blue; width:50%; height:50%; float:right" (click)="readColor($event)">blue</div>
<div style="background-color:green; width:50%; height:50%; float:left" (click)="readColor($event)">green</div>
<div style="background-color:orange; width:50%; height:50%; float:right" (click)="readColor($event)">black</div></div></div>
<div [style.background-color]="color">some text here</div>
</div>
Typescript method
readColor(value){
this.color=value.srcElement.style['background-color'];
console.log(value.srcElement.style['background-color']);
}
这篇关于在angular2上单击div来更改另一个div的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文