温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - How can one use CSS in an if statement of JavaScript code?
css if-statement javascript sharepoint vue.js

其他 - 如何在JavaScript代码的if语句中使用CSS?

发布于 2020-04-14 15:33:28

我有一个Vue.js组件,当if条件为true时,我想使用此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语句为true,如何使用CSS部分?

查看更多

提问者
Politics Student
被浏览
56
Jeremy Harris 2020-02-03 22:01

您在这里有几个选择:

  1. 根据条件动态将类应用于元素
  2. 根据条件动态将内联样式应用于元素

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

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;
}
<div class="box" />