Javascript 状态为（.active）的元素的getAttribute

检查元素属性的活动状态时遇到问题。我在下面尝试过，但它返回false，即使元素的属性处于活动状态-（

.c-banner.active

存在）

---

您可以使用

classList.contains

方法检查元素是否具有活动类

ngAfterViewInit() {
    setTimeout(() => {
        const isActive = bannerElm &&
                         bannerElm.classList.contains('c-banner') &&
                         bannerElm.classList.contains('active');
    }, 1000);
}

---

[更新]将其包装在setTimeout（）内，它就成功了！以防其他人遇到我之前遇到的组件初始化订单问题

为什么不使用类列表和包含

classList

contains（）

您应该使用ViewChild，而不是直接访问DOM。
两者都会起作用，但这是严格的方法

@ViewChild('banner') input; 
ngAfterViewInit() {
    var classAttributes= this.input.nativeElement.getAttribute('class');
    var result=classAttributes&&classAttributes('c-banner')
}

除了实际访问class属性值的最佳方式之外，根据您的评论判断，这个问题似乎是异步的。
为了避免使用刻薄的
setTimeout
解决方案，我建议应用一个变异观察者，并相应地对属性的更改做出反应。
这里有一个方法

@ViewChild('banner') input; 
ngAfterViewInit() {
    var classAttributes= this.input.nativeElement.getAttribute('class');
    var result=classAttributes&&classAttributes('c-banner')
}

PS：编辑答案，使之更适合你想要实现的目标。最后，这不会造成很大的区别，除了在去盎司时间结束前更改标题状态，主体立即发出，与使用
setTimeout

bannerIsActive$ = new BehaviorSubject<boolean>(false);

ngAfterViewInit() {
    const banner = document.getElementById('banner');

    const observer = new MutationObserver((mutations: MutationRecord[]) => {
        const mutation = mutations[0];
        const classList: DOMTokenList = mutation.target['classList'];
        this.bannerIsActive$.next(mutation.attributeName === 'class' && classList.contains('active'));
    });

    observer.observe(banner, {
        attributes: true
    });

    this.bannerIsActive$.pipe(
         debounce(isActive => timer(isActive ? 0 : 1000)),
         take(1)
    ).subscribe(isActive => {
       // do something with the banner state
    });
}

bannerIsActive$=新行为主体（false）；
ngAfterViewInit（）{
const banner=document.getElementById（'banner'）；
常量观察者=新的突变观察者（（突变：突变记录[]）=>{
常数突变=突变[0]；
const classList:DOMTokenList=mutation.target['classList']；
this.bannerIsActive$.next（mutation.attributeName=='class'&&classList.contains（'active'）；
});
观察者观察（横幅）{
属性：true
});
此.banner活动$.pipe(
去抖动（isActive=>定时器（isActive？0:1000）），
采取（1）
).订阅（isActive=>{
//对旗帜州做些什么
});
}
那么bannerElm.getAttribute（“class”）

的值是什么？

.getAttribute（“class”）

将返回与您在DOM中看到的值完全相同的class属性，那么您为什么要寻找

c-banner.active

，它像css选择器一样有一个句点，没有空格？它返回了“c-banner”。是的@BenSewards，你是对的，它返回的值与原样完全相同。但是，附加的属性是.c-banner.active，所以我的问题是如何验证是否应用了.active状态css样式。我看到了很多关于如何正确访问类/类列表的答案。在ngAfterViewInit生命周期钩子中选中class属性时，其值据称是

c-banner

。可能由于本质上是异步的操作，元素未处于预期状态？如何设置横幅的活动状态？您能在超时后尝试获取元素类吗？（仅出于调试目的）@JanWendland setTimeout与classList.contains组合在一起对我有效！！谢谢你们@user11151040让你这么做：）@benshabatnoam是的，但总而言之它包含人工：）@user11151040你的代码示例不正确。它应该是.classList.contains（）。虽然你更快，但我选择了另一个答案。仅供参考，您可以随时单击“编辑”并重新验证答案。@displayname是的，您是对的。提到解释后，我忘了如何将其添加到内容中这很有趣：）现在编辑它。@janwedland不错的一个！QQ。如果我只想获取一次状态，而忽略状态更改，该怎么办？我想过订阅和再订阅，但也许有更好的解决方案！我得说这取决于你想对国家做什么。您是否正在使用组件模板中的状态？在这种情况下，您可以简单地在组件上使用false初始化它，并让变异侦听器回调更新它，以防标题设置为活动状态。如果场景稍微复杂一点，并且您希望根据标题状态发出某种请求，您可以在组件上创建行为主体，使用false初始化它，订阅它时，使用一个你认为合理的去抖动时间，让异步操作赶上并调用对象的下一个方法。然后，您可以订阅它，无论标题状态是否更改，您都将在取消Bounce时间后获得标题的当前状态。但也许你可以在你想要达到的目标上做更多的努力@displayname@displayname将该方法编辑到我的答案中。我尝试了它，但它没有捕获活动状态。

bannerIsActive$ = new BehaviorSubject<boolean>(false);

ngAfterViewInit() {
    const banner = document.getElementById('banner');

    const observer = new MutationObserver((mutations: MutationRecord[]) => {
        const mutation = mutations[0];
        const classList: DOMTokenList = mutation.target['classList'];
        this.bannerIsActive$.next(mutation.attributeName === 'class' && classList.contains('active'));
    });

    observer.observe(banner, {
        attributes: true
    });

    this.bannerIsActive$.pipe(
         debounce(isActive => timer(isActive ? 0 : 1000)),
         take(1)
    ).subscribe(isActive => {
       // do something with the banner state
    });
}