gpt4 book ai didi

css - 在 Angular 中删除或添加类

转载 作者:太空狗 更新时间:2023-10-29 18:05:43 32 4
gpt4 key购买 nike

我有一个列表和我使用的插件 (dragula),在某些操作上添加了某些 CSS 类。我正在使用 Angular 5。我想找出某个类 (myClass) 的存在并将其删除并替换为 (yourClass)。在 jQuery 中我们可以这样做

$( "p" ).removeClass( "myClass" ).addClass( "yourClass" );

我怎样才能在 Angular5 中实现这一点。这里的主要问题是 myClass 被插件自动添加到所选的 li 中。所以使用函数我无法设置类。

当我尝试使用 renderer2 时,它删除了 CSS 类并添加了另一个类。但它只添加到第一个 li。我的代码是:

let myTag ; 
myTag = this.el.nativeElement.querySelector("li");
this.renderer.addClass(myTag, 'gu-mirrorss')
this.renderer.removeClass(myTag, 'dragbox');
<div  class="right-height" id ='dest' [dragula]='"second-bag"' [dragulaModel]="questions"> 
{{ questions.length == 0 ? ' Drag and drop questions here ' : ' '}}
<li #vc data-toggle="tooltip" data-placement="bottom" title= {{question.questionSentence}} class="well dragbox" *ngFor="let question of questions; let i = index" [attr.data-id]="question.questionId" [attr.data-index]="i" (click)="addThisQuestionToArray(question,i, $event)" [class.active]="isQuestionSelected(question)" #myId > {{question.questionId}} {{question.questionSentence}}</li>
</div>

最佳答案

进口ElementRef来自 Angular 核心并在构造函数中定义然后尝试以下代码:

下面的代码行会给你第一次出现 <p>来自组件的标签。 querySelector给你第一个元素和querySelectorAll为您提供 DOM 中的所有元素。

import { Component, ElementRef } from "@angular/core";

constructor(private el: ElementRef) {
}

let myTag = this.el.nativeElement.querySelector("p"); // you can select html element by getelementsByClassName also, please use as per your requirement.

添加类:

if(!myTag.classList.contains('myClass'))
{
myTag.classList.add('myClass');
}

删除类:

myTag.classList.remove('myClass'); 

关于css - 在 Angular 中删除或添加类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48925353/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com