Javascript 几个CSS元素的条件

我有一个最初嵌入JavaScript文件中的CSS文件，因此可以通过将CSS嵌入样式表与JavaScript逻辑相结合来创建条件。我现在正在分离CSS和JavaScript文件，在处理受单个条件影响的较大的CSS块时遇到了问题

我知道一种解决方案是在JavaScript/JQuery代码中创建一个条件，用于处理样式更改：

if(condition == true) {
      $(".element").css("left", "360px");
}

---

对于只有几个变化属性的CSS样式来说，这似乎是一个不错的解决方案。然而，在我的例子中，我必须只为if-else语句编写100行代码。有没有更直观的方法来执行此任务？

也许您可以向父级添加一个类，如

并在css中添加特定规则：

.conditional-class .element{
   top: 360px;
}

---

也许您可以向父级添加一个类，如

并在css中添加特定规则：

.conditional-class .element{
   top: 360px;
}

---

您可以使用对象来保存css，这是某些条件所需的。例如：

const firstCondition={
轮廓：“1px纯红”，
背景颜色：“蓝色”，
颜色：“白色”
};
const secondCondition={
轮廓：“1px纯蓝色”，
背景颜色：“红色”，
颜色：“黄色”
};
函数applyStyles（节点、样式）{
Object.keys（style）.forEach（（key）=>{
node.style[key]=样式[key]；
});
}
设计数器=0；
const target=document.querySelector（“目标”）；
函数switchStyles（）{
如果（计数器%2==0）{
applyStyles（目标，第一个条件）；
}否则如果（计数器%2==1）{
applyStyles（目标，第二个条件）；
}
计数器++；
}

你好
切换方式

您可以使用对象来保存css，这在某些情况下是必需的。例如：

const firstCondition={
轮廓：“1px纯红”，
背景颜色：“蓝色”，
颜色：“白色”
};
const secondCondition={
轮廓：“1px纯蓝色”，
背景颜色：“红色”，
颜色：“黄色”
};
函数applyStyles（节点、样式）{
Object.keys（style）.forEach（（key）=>{
node.style[key]=样式[key]；
});
}
设计数器=0；
const target=document.querySelector（“目标”）；
函数switchStyles（）{
如果（计数器%2==0）{
applyStyles（目标，第一个条件）；
}否则如果（计数器%2==1）{
applyStyles（目标，第二个条件）；
}
计数器++；
}

你好
切换方式

您可以使用javascript添加单独的css文件-

if(condition == true) {
  $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
} else {
  $('head').append('<link rel="stylesheet" type="text/css" href="index.css">');
}

if（条件==true）{
$（'head'）。追加（''）；
}否则{
$（'head'）。追加（''）；
}

---

简短、简单，但对您的情况有效。

您可以使用javascript添加单独的css文件-

if(condition == true) {
  $('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
} else {
  $('head').append('<link rel="stylesheet" type="text/css" href="index.css">');
}

if（条件==true）{
$（'head'）。追加（''）；
}否则{
$（'head'）。追加（''）；
}

---

简短、简单，但对您的情况有效。

我不确定您检查的是哪种情况，但这是屏幕大小或比例的问题吗？如果您需要媒体查询：我实际上必须在媒体查询条件中处理上述问题。我认为向元素添加类的想法将解决我的问题。不过，谢谢你的回复。我不确定你在检查什么样的情况，但这是屏幕大小或比例的问题吗？如果您需要媒体查询：我实际上必须在媒体查询条件中处理上述问题。我认为向元素添加类的想法将解决我的问题。不过，谢谢你的回复。