CSS 在 jQuery 中使用 if 语句进行操作

Question

$(document).ready(function(){
  var width = $(window).width();
  $(function(){
    if ( width < 800 ) {
          $(".navbar-brand").css({'margin-left':'0'});
      }else{
          $(".navbar-brand").css({'margin-left':'100px'});
      }
  });
});

你好，我知道这是基本的，我不应该问这么简单的问题，但我自己已经挣扎了足够长的时间。我想做的是当视口宽度小于 800px 时删除导航栏中的 margin-left，我可以简单地通过添加 class 来完成，但我真的很想学习如何操作 css, jquery.

非常感谢您的建议，谢谢。

Answer 1

目前您正在传递一个对象来定义边距。

作为替代方案，jquery 使用“左边距”而不是“margin-left”

试一试。

Answer 2

解释： 我创建了一个函数 changeScrSize()，它对 CSS 属性进行了更改。在 ready 事件处理程序中，调用该函数，并相应地设置 margin-left 的值。除此之外，我还添加了一个 resize 事件处理程序，它会在您调整屏幕大小时修改 margin-left 的值。所以它反应灵敏:)

注意：请在全屏模式下查看输出，以查看更改。

var width;

$(document).ready(function(){
  changeScrSize();
});

function changeScrSize(){
  let box = $('.navbar-brand');
  width = $(window).width();
  (width < 800) ? box.css("margin-left", 0) : box.css("margin-left", "100px");
}

$(window).on("resize", changeScrSize);

* {
  margin: 0;
  padding: 0;
}

.navbar-brand {
  background: red;
  width: 25vh;
  height: 25vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar-brand">
</div>

Answer 3

尝试使用带有属性和空值的 .css() 方法来删除该样式。

$(".navbar-brand").css('margin-left','');

CSS 在 jQuery 中使用 if 语句进行操作

CSS manipulation in jQuery with if statement

css

jquery

if-statement

margin