jquery - 画像のサイズよりも 10 px 大きい分割を入れる

Question

これが機能しない理由がわかりませんdiv。画像のサイズよりも大きくしたいですか？

<script type="text/javascript">
    $(document).ready(function() {
        $(function() {
            var a = $('#img').clientWidth;
            $('#viewimg').css('width', +a);
            var b = $('#img').clientHeight;
            $('#viewimg').css('height', +b);
        });
    });
</script>

HTML

 <  div  style="he"">
      <div id="viewimg">
        <p>asdsa
        </p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
      <img id="img" src="https://www.google.com/intl/es_ALL/images/logos/images_logo_lg.gif" style= border:dotted 1px;"/>
      <div class="t">
      </div>
    </div>

Answer 1

padding（上と左）または（上と左）を設定marginすると作業が行われます

$(document).ready(function() {
        var extraSpace = 15;//pixels
        var img = $("#img");
        var div = $("#viewimg");
        img.css('margin-left', extraSpace/2);
        img.css('margin-top', extraSpace/2);
        var a = img.width();
        var b = img.height();
        div.css('width', a+extraSpace);
        div.css('height', b+extraSpace);
});​

デモ： http： //jsfiddle.net/dkr3A/3/

Answer 2

clientWidthそのようにjQueryオブジェクトで使用することはできません。この jsFiddle を見てください: http://jsfiddle.net/hewnR/1/

jQuery オブジェクトに一致する DOM 要素にアクセスする場合は、.get(). ドキュメントを見てください。.width()ただし、代わりにjQuery のメソッドを使用すると、より簡単になります.get(0).clientWidth。

//This doesn't work:
var a = $('#img').clientWidth;

//But this does:
var a = $('#img').get(0).clientWidth;
//and does the same as this:
var a = $('#img').width();

//Then, add 10px and change the width:
$('#viewimg').width(10+a+'px');

Answer 3

var a= $('#img').width();
$('#viewimg').width(a+10) ; // $('#viewimg').css('width', a+10);