javascript - 如何使用javascript将类设置为div标签

Question

我正在用 laravel 做元素。我有一个变量 $emails_unread_count 用于存储随机的未读电子邮件。我想在 blade 文件中将新类添加到这个数量的 div，这样我就可以只为未读的电子邮件添加 css，而不是为只读一次。 我的 Blade 文件看起来像，

display.blade.php

        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            @foreach($data as $from)
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="heading{{$from->id}}">
                        <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#{{'collapse' . $from->id}}" aria-expanded="true" aria-controls="{{'collapse' . $from->id}}">
                                {{$from->from}}
                            </a>
                        </h4>
                    </div>
                    <div id="{{'collapse' . $from->id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{$from->id}}">
                        <div class="panel-body">
                            {{$from->body}}
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

我想将名为“未读”的新类添加到“面板标题”div。此类应应用于未读邮件数。请提出建议。

Answer 1

要在 javascript 中更改元素的类，请使用:

 document.getElementById("MyElement").className = "MyClass";

向元素添加附加类:

document.getElementById("MyElement").className += " MyClass";