js改变css样式方法

崽崽有点笨

已于 2023-03-30 10:33:24 修改

阅读量337

点赞数

文章标签： css javascript 前端 Powered by 金山文档

于 2023-03-14 11:19:24 首次发布

本文链接：https://blog.csdn.net/m0_62285976/article/details/129521022

版权

例如一个列表，其中有已回复和未回复两种状态，当你循环判断渲染之后又无法写两个样式

先写样式

.moren{
        background-color: #4888ED ;
        color: #fff;
        padding: 0 10px;
        border-radius: 50px;
    }
    .hongse1{
        background-color: #FF5151;
        color: #fff;
        padding: 0 10px;
        border-radius: 50px;
    }

再来js

for (i = 0; i < result.list.length; i++) {
                //设置一个变量接受上面默认css类名
                var yangshi="moren"
                //判断当前状态是什么
                if(result.list[i].status=="未回复"){
                    yangshi="hongse1"
                }
                //把变量加到class类名后面，用变量的方式
                html += `
                <div class="text"><span class="pull-right `+yangshi+`">` + result.list[i]['status'] + `</span></div>`;
            }

然后就好啦