单击是按钮时添加边框和背景颜色答案

【问题标题】：Add border and background color when I click the yes button单击是按钮时添加边框和背景颜色
【发布时间】：2020-01-28 09:16:16
【问题描述】：

我正在为 cmets 开发一种文本框。当我点击“是”按钮时，我希望点击来自的框具有某种边框和背景颜色，以表明点击来自该框。

有人可以帮我吗？

BLITZ

代码

<div class="Submitcomments" *ngFor="let c of data; let  i = index;">
    <div>
        <div class="row rowComments" style="margin-top: 11px;">
        </div>
        <div class="form-group">
            <textarea  #myinput type="text" class="form-control AreaText" rows="2"></textarea>
        </div>
        <div class="row" style="margin-top: -20px; margin-left: 5px;">
            <button *ngIf="c.currentState=='pause'" class="btn reply" (click)="adjustState(i)">Yes</button>
            <button *ngIf="c.currentState=='start'" class="btn reply1" (click)="adjustState(i)">No</button>
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

尝试在您的 html 中使用 [ngStyle] 绑定。

类似这样的：

<textarea #myinput type="text" class="form-control AreaText" rows="2"
  [ngStyle]="{
    'background-color': c.currentState=='start' ? '#daf4d5' : 'initial', 
    'border': c.currentState=='start' ? '1px solid green' : ''
  }">
</textarea>

编写ngStyle 的方法更短，但这种方法允许您为未单击的框元素选择一种样式。此外，您可能希望将组件中的 ngStyle 值作为字符串移动，并改用它（以使 html 更具可读性）。

【讨论】：

【解决方案2】：

您可以使用 AfterViewInit 等待组件加载完毕。然后，每次在每个元素 .Submitcomments 内单击子 btn 时，只需更新每个 textarea 样式。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';   

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    let submitComments = document.querySelectorAll('.Submitcomments');
    [].slice.call(submitComments).forEach((submitComment, index) => {
        submitComment.querySelector('.btn').addEventListener('click', (event) => {
            submitComment.querySelector('textarea').style.border = '1px solid red';
        });
    });
  }

https://stackblitz.com/edit/angular-qe9hac?file=src/app/app.component.ts

注意：我不是 Angular 2 开发人员，所以我确信有一种更“有角度”的方法可以做到这一点。但这暂时有效。

【讨论】：

除非真的需要，否则我不建议使用querySelector。 Angular 提供了很多处理 DOM 元素的方法，querySelector 应该更接近 imo 的最后手段。
非常感谢您的帮助！当我们单击该按钮时，它会从“是”变为“否”，并且边框会改变颜色。很好，但是有没有办法让边缘消失状态返回YES状态，也就是我想回到初始状态？
@Jojofoulk 我考虑使用的方法之一是使用 JQuery，但我发现它不是最好的解决方案。因此我不知道如何正确应用它:(
@Jojofoulk 就像我说的，我确信有一种更角度的做事方式。

【解决方案3】：

试试这个，如果这是你需要的，也不要忘记给我投票，因为这需要我做的时间，我没有时间浪费很多时间，但如果这根本不起作用，你不必给我投票我只是说如果它有效记得给我点赞

window.onload = function() {
//onclick event

    document.getElementById("yes").onclick = function fun() {
 

       var element = document.getElementById("yes");
  element.classList.add("yeep");
            element.classList.remove("unk");


    }
}

.yeep{
background-color:green ;
border-color:limegreen ;
border-width:5px;
color:white;
}
.unk{

background-color:darkgray;
border-color:gray;
border-width:5px;
color:white;
}

&lt;button class='unk' id = 'yes'&gt;yes!&lt;/button&gt;

【讨论】：