Picture's width to be placed inside < div >

Question

While resizing the picture, I want the picture width added to < div id="w" >< /div >, I have tried the following, anyone can help? thank you:

<script>
$(document).ready(
function() {
    $( "#resizable" ).resizable({
         resize: select_function
    });
});
var select_function = function(event, ui)
{
    $("#w").text($( "#resizable" ).attr("width"));
};

</script>
 <div id="w">Test</div>
<img border="0" id="resizable" src="picture.png">

Answer 1

You don't have a width="" attribute.

To get the actual width of the element, call $( "#resizable" ).width() .

Answer 2

你试过像这样得到图像的宽度吗？

$("#w").html($( "#resizable" ).width());

Answer 3

You either need to add a width attribute to the img tag.

<img border="0" id="resizable" src="picture.png" width="500px">

Or you need to use the built-in JQuery width() function.

$( "#resizable" ).width();

I recommend checking out the JQuery docs on .width() and .attr() to get a better understanding.