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

您不能像这样在jQuery对象上使用clientWidth。看看这个jsFiddle： http://jsfiddle.net/hewnR/1/

如果要访问jQuery对象匹配的DOM元素，则需要使用.get()。看看documentation。但是如果你使用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);

将图像的大小增加10 px

3 个答案: