调整浏览器大小时如何获取选定的div宽度

Question

I want to get selected div width according to following algorithm:

1. If user resize browser then get div width according to resize browser div.

2. If user don't resize browser then get div width normally.

Here is my code

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

    if ($(window).resize) {
        var width = $('#main_header .wrapper').width($(window).resize);
    }
    else {
        var width = $('#main_header .wrapper').width;
    }

});

My code don't work, Please, any one can help me solving this problem. Thanks

Answer 1

Your use of if is the problem. Try this:

jQuery(document).ready(function($) {
  $(window).resize(function() {
    alert("$('#main_header .wrapper').width());
  })
});

$(window).resize will always return true because resize is a jQuery function. This code instead watches window for a resize event and calls the inner function when it happens.

I didn't fill in the inner function because I wasn't clear on what you wanted to happen upon resize.

Answer 2

This little function will get the width of #main_header .wrapper and update it on resize:

$(function() {
    var $wrapper = $('#main_header .wrapper');//the element we want to measure
    var wrapperWidth = $wrapper.width();//get its width    
    $wrapper.text(wrapperWidth);//dunno what you want to do with wrapperWidth but here im setting it as the text of .wrapper just so you can see the value changing
    //add resize listener
    $(window).resize(function() {
        wrapperWidth = $wrapper.width();//re-get the width
        $wrapper.text(wrapperWidth);//update the text value
    });
});

Here's a working demo: http://jsfiddle.net/5rZ4A/