如何在 JavaScript 代码的 if 语句中使用 CSS？答案

【问题标题】：How can one use CSS in an if statement of JavaScript code?如何在 JavaScript 代码的 if 语句中使用 CSS？
【发布时间】：2020-02-03 13:55:39
【问题描述】：

我有一个 Vue.js 组件，我想在 if 条件为真时使用这个 CSS 部分：

<style type="text/css">  
 #sideNavBox {DISPLAY: none}  
 #contentBox {MARGIN-LEFT: 5px}  
</style>

这是 JavaScript：

IsCurrentUserMemberOfGroup("Admins", function (isCurrentUserInGroup) {
    if(isCurrentUserInGroup) {
        for (var i = 0; i < data.length; i++) {
            $this.teams.push({
                id: data[i].ID,
                TeamName: data[i].TeamName.TeamName,
                Coach: data[i].Coach,
                CoachTel: data[i].CoachTel,
                CoachAddress: data[i].CoachAddress,
                CoachAssistant: data[i].CoachAssistant,
                CoachAssistTel: data[i].CoachAssistTel,
                CoachAssistAddress: data[i].CoachAssistAddress,
                Email: data[i].Email
            });
        }
        console.log("Works!")
    }
});

我可以在

中添加 CSS 部分

<style>
</style>

但它会一直被使用。

如果 if 语句为真，如何使用 CSS 部分？

【问题讨论】：

标签： javascript css vue.js if-statement sharepoint

【解决方案1】：

你有几个选择：

根据条件动态地将类应用于元素
根据条件对元素动态应用内联样式

就个人而言，我更喜欢使用类。这是一个例子：

const val = 42;

// Conditional
if (val === 42) {
   setTimeout(() => {
      document.querySelector('.box').classList.add('box--blue');
   }, 1000);
}

if (val === 100) {
   setTimeout(() => {
      document.querySelector('.box').classList.add('box--green');
   }, 1000);
}

.box {
   width: 100px;
   height: 100px;
   background-color: deeppink;
   transition: all 2s ease;
}

.box--blue {
   background-color: dodgerblue;
}

.box--green {
   background-color: limegreen;
}

&lt;div class="box" /&gt;

【讨论】：