[英]Add width of the screen to a class if screen width is less than 960 px
下面的代码将屏幕的宽度添加到类.reverse
var w = $(window).width();
$('.reverse').css('width', w);
但我希望只有在屏幕宽度小于960px时才这样做:
if ($(window).width() < 960) {
$('.reverse').css('width', w);
}
上面的代码无法正常工作,您可以看看吗? 谢谢!
我认为您正在调整窗口大小以检查此效果,因此您需要向DOM添加调整大小的eventListener。
$(window).on('resize',function(){
var w=$(window).width();
if (w< 960) {
$('.reverse').css('width', w);
}
})
尝试使用jQuery
$(window).resize(function(){
var width = $(window).width();
console.log(width);
if (width < 960){
$('.reverse').css('width', width);
};
});
这样,您就可以在调整大小的同时不断检查窗口的宽度。
如果不必使用javascript,也可以使用CSS和媒体查询来执行此操作
@media (max-width: 960px) {
.reverse {
width: 100vw;
}
}
var w = $(window).width();
if (w < 960) {
$('.reverse').css('width', w);
}
注意,如果需要,请添加事件管理,但未定义w
。
如果您添加了事件管理,请小心,因为它将触发很多事件,并且最好不要每次都强制重排-查看该单独的问题。
可能调整大小的防反跳的链接https://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/
if ($(window).width() < 960) { $('.reverse').css('width', w); }
您没有初始化w
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.