按钮单击对其他CSS文件的更改并返回{JavaScript，jQuery}

我有个问题要问你们。 我做了一个网站，主要是一个格栅，有一些属性，如颜色，高度，宽度。。。 这些样式是用“bord.css”制作的。现在，我有一个脚本，通过单击“更改样式”按钮，将目标更改为另一个名为“bord2.CSS”的CSS文件。这管用！通过使用if-else语句，它将尝试检查它是'bord.css'还是'bord2.css'，并不断地前后更改它。在if-else中的某个地方，它崩溃并且不显示原始CSS文件

$('#change-look').click(function (){
   if($('link[href]' == "style/bord.css")) {
      $('link[href="style/bord.css"]').attr('href','style/bord2.css');
   } else {
      $('link[href="style/bord2.css"]').attr('href','style/bord.css');
   }
});

谢谢你的帮助

问候

---

我可以提出建议吗。不要有两个不同的.css文件，而是创建两个不同的css类，如下所示：

CSS:

考虑到您的html如下所示：

HTML:

我知道这不是对您问题的直接回答，也不知道交换完整的.css文件是否是一种好的做法，但我已经多次使用这种方法，没有任何问题

---

祝你好运

谢谢你的帮助，伙计！非常感谢，但我必须处理两个不同的CSS文件，这是任务的一部分。必须这样做。：（太糟糕了。我会关注这篇文章。我也对如何可靠地做到这一点感兴趣。我想你回答了你自己的问题…@JeffUK我的代码似乎很有希望，但它执行得不好。正如我所说，按钮单击对于CSS的第一次更改很有效。但是再次单击没有任何作用：(

.boardA{
 }
 .boardB{
 }

<div class='boardA' id="chessBoard"></div>

   $('#change-look').click(function (){
      var chessBoard = $("#chessBoard");
      if(chessBoard.hasClass('boardA')){
            chessBoard.removeClass('boardA');
            chessBoard.addClass('boardB');
      }
      else{
            chessBoard.removeClass('boardB');
            chessBoard.addClass('boardA');
      }
   });