este es mi archivo html
<div id="addingMembers"> </div> <div class="selectMember"> <div class="selectTitle" (click)="addMember()"> <p class="selectMemTitle">Add a member</p> <mat-icon aria-hidden="false" aria-label="add icon">add_circle_outline</mat-icon> </div> </div>
este es mi archivo Javascript :
addMember(){ const x = document.getElementById('addingMembers'); x.innerHTML+ = `<div id="members"> Hey I'm added </div> `; }
Aquí, quiero diseñar mi div de miembros usando el archivo CSS, pero los estilos no se aplican en él:
#addingMembers #members{ background-color: red; }
Use la pseudoclase ::ng-deep para deshabilitar la encapsulación de vistas. O mueva sus estilos a estilos globales.
::ng-deep #addingMembers #members{ background-color: red; }
Agregue una clase al control que está agregando. Compruebe a continuación la muestra.
function tes() { let change = document.getElementById("addingMembers"); change.innerHTML = '<input type="text" class="randomCls"/>'; }
.randomCls{ background-color:red; }
<div id="addingMembers"> </div> <input type="button" id="btn1" onclick="tes()" value="Check" />