如何解决使用if语句在jQuery中进行CSS操作
$(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,我可以简单地通过添加一个类来做到这一点,但是我真的很想学习如何使用jquery来操纵css。 >
感谢您的所有建议,谢谢。
解决方法
当前,您正在传递一个对象来定义边距。
作为替代方案,jquery使用“ marginLeft”而不是“ margin-left”
尝试一下。
, 说明:我做了一个函数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>
,
尝试将.css()方法与属性和空值一起使用以删除该样式。
$(".navbar-brand").css('margin-left','');
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。