基于浏览器宽度定位元素时出现问题

Problems positioning element based on browser width

本文关键字：问题 元素 定位 浏览器      更新时间：2023-09-26

我有一个固定位置的div，我希望它的左位置：当浏览器窗口小于1200px时为0，但当大于1200px时没有左位置。我正在使用这个代码

var $window = $(window);
function checkWidth() {
    var windowsize = $window.width();
    document.write(windowsize);
    if (windowsize < 1200) {
        document.getElementById("DBCIbox").style.left = "0";
    } else {50
        document.getElementById("DBCIbox").style.left = "500px";
    }
}
checkWidth();
$(window).resize(checkWidth);

但它似乎什么都没做。我设置left＝500px只是为了测试javascript是否正常工作，然后我会担心我想把它放在哪里

我做了一些谷歌搜索，据我所知，这应该有效，我缺少什么？

如果有办法清除左边的位置，我也想知道。

var $window = $(window);

那行正在缓存窗口的实例。每次调用此代码时，都需要重新评估$(window)，以获得更新的宽度和高度值

下方的更新代码

function checkWidth() {
    var $window = $(window);
    var windowsize = $window.width();
    document.write(windowsize);
    if (windowsize < 1200) {
        document.getElementById("DBCIbox").style.left = "0";
    } else {50
        document.getElementById("DBCIbox").style.left = "500px";
    }
}
checkWidth();
$(window).resize(checkWidth);

@Jnatalzia说得对，我需要做一些调整，评论不允许我发布代码，但答案要归功于@Jnatalzia。

   function checkWidth() {
        var $window = $(window);
        var windowsize = $window.width();
        var position;       
        if (windowsize < 1390) {
            document.getElementById("DBCIbox").style.marginLeft = 0 + "px";
        } else if (windowsize >= 1390) {
            position = windowsize - 1060;
        position = position / 2;
        position = position - 175;
            document.getElementById("DBCIbox").style.marginLeft = position + "px";
        }
    }
    $("document").ready(function(){
       $(window).load(function(){
          checkWidth();
       });
       $(window).resize(function(){
          checkWidth();
       });
    });
相关文章：