Question

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

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

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

对于只有几个更改属性的CSS样式，这似乎是一个好的解决方案。但是，就我而言，我只需要为if else语句写100几行代码。有没有更直观的方式来执行此任务？

Answer 1

也许您可以将类添加到像<body>这样的父类中

if(condition == true) {
      $('body').addClass('conditional-class');
}

并在CSS中添加特定规则：

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

Answer 2

您可以使用对象保留某些条件所需的CSS。例如：

const firstCondition = {
  outline: '1px solid red',
  backgroundColor: 'blue',
  color: 'white'
};

const secondCondition = {
  outline: '1px solid blue',
  backgroundColor: 'red',
  color: 'yellow'
};

function applyStyles(node, styles){
  Object.keys(styles).forEach((key) => {
    node.style[key] = styles[key];
  });
}

let counter = 0;

const target = document.querySelector("#target");

function switchStyles(){
  if(counter % 2 === 0){
    applyStyles(target, firstCondition);
  }else if(counter % 2 === 1){
    applyStyles(target, secondCondition);
  }
  counter++;
}

<div>
  <div id="target"> Hello! </div>
  
  <button onClick="switchStyles()">Switch style</button>
</div>

为进一步学习，建议您阅读有关jss

Answer 3

您可以使用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">');
}

简短而又有效的案例。

几个CSS元素的条件

3 个答案: