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(). 看看文档。但是如果你使用 jQuery 的方法.width()而不是.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);