Question

这可能是一件简单的事情，但是它有点像javascript / jquery noob im botching它。

我希望能够有一个div类，在那里改变它的大小（手动或动态大小30％等）报告其大小（以像素为单位）。

我找到了各种各样的脚本，其中一些做类似的事情，但要么它们不太正确..有些做窗口，有些做文档，我甚至找到段落，但没有div。或者我无法理解其工作原理。

我想要的例子但DIV NOT窗口：
http://www.mkyong.com/jquery/jquery-resize-example/

演示： http://www.mkyong.com/wp-content/uploads/jQuery/jQuery-resize-example.html

我怀疑我需要更改$(window).resize(function () to $(div.class).resize(function ()或其他内容，但我无法得到它。

Answer 1

您必须使用窗口调整大小功能。我想这会对你有帮助

$(window).resize(function(){
    console.log($("yourdiv").width()); // This will report the width of your div in px.
});

希望这有帮助。

Answer 2

也许你需要的是jquery ui可调整大小？因为你正在使用jquery。

http://jqueryui.com/resizable/

它有很多选项和方法：

http://api.jqueryui.com/resizable/

Answer 3

这应该有效

setInterval(function() {
    $('div#change').text("Width " + $('div#change').width() + ", height " + $('div#change').height()); 
}, 100);

您只需要使用jQuery resize（）方法，该方法会在调整目标元素大小时触发。

jsfiddle

Answer 4

最终解决了这个问题： http://jsfiddle.net/ablueman/2uvpk2d5/

//DIV with .change class
$('#changelog').text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');

$(window).resize(function () {
$('#changelog').text(' W: ' + $('.change').width() + 'px , H:' + $('.change').height() + 'px ');
});

谢谢大家。

调整div的大小并动态检测宽度

4 个答案: