在angular2上单击div来更改另一个div的背景颜色(Change another div's background color on click of div with angular2)

HTML/CSS IT屋
百度翻译此文   有道翻译此文
问 题

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']);
  }

LIVE DEMO

本文地址:IT屋 » Change another div&#39;s background color on click of div with angular2

问 题

我在页面上有一个组件,它包含以下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']);
}


LIVE DEMO


本文地址:IT屋 » 在angular2上单击div来更改另一个div的背景颜色

官方微信
扫一扫关注IT屋
微信公众号搜索 “ IT屋 ” ,选择关注
与百万开发者在一起