根据其他元素宽度动态更改元素宽度

Question

由于我在脚本编写方面不够好，所以找不到合适的语法。

请看下面的图片。我需要将div.dependable的{​​{1}}设置为width，将设置为调整窗口大小。

我有相似的例子，请参阅X + 16px的代码。尝试调整窗口大小 - 蓝色块将始终位于水平和垂直中心。但我无法弄清楚正确的编码。

jQuery，Modernizr已加载。

Answer 1

如果我理解正确，这意味着X是窗口宽度的值 - #main-wrap宽度然后除以2得到每边的宽度。您必须确保在加载DOM时以及每次调整窗口大小时调用此函数。

jQuery(document).ready(function($){
    calcDependable();
});

$(window).resize(calcDependable);

function calcDependable(){
    var x = ($(window).width() - $("#main-wrap").width())/2;
    x = (x < 0 ) ? 0 : x; // make sure value is always 0 or above
    $(".dependable").width(x+16);
}

Answer 2

您将首先挂钩resize window事件，从左侧找到您的包装的offset，然后修改您的width相应的元素，如下：

$(window).on('resize', function (){

    var leftOffset = $('#main-wrap').offset().left;
    $('.dependable').css('width', leftOffset + 16);

});

这会按照您的要求运行，但我也建议您首先添加相同的语句，以便在$(document).ready获得正确的宽度。

jQuery(document).ready(function ($){

    var leftOffset = $('#main-wrap').offset().left;
    $('.dependable').css('width', leftOffset + 16);

});

Working demo

为了坚持DRY code的原则，您可能希望将代码包装在函数语句中;这是强烈建议的。也许是这样：

function offsetPlusX(targetElement, x){

    var leftOffset = $('#main-wrap').offset().left;
    targetElement.css('width', leftOffset + x);

}

Answer 3

您必须使用窗口调整大小事件并确保在doc.ready循环中使用

$(document).ready(function(){
    $(window).resize(function() {
        var x = ($(window).width() - $('div#mainwrap').width())/2;
        var targ_w = (x+16) + "px";
        $('div.dependable').css({'width': targ_w});
    });
});