jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight之间有什么区别？

本文介绍了jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight之间有什么区别？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

 < p>我写了一个例子来看看有什么区别，但是它们对宽度和高度显示相同的结果。 ; HTML> 
< head> 
< script type =text / javascriptsrc =jquery.js>< / script> 
< script type =text / javascript> 
 $（document）.ready（function（）{
 var div = $（'。test'）; 
 var width = div.width（）; // 200 px 
 var innerWidth = div.innerWidth（）; // 200px 
 var outerWidth = div.outerWidth（）; // 200px 
 
 var height = div.height（）; // 150 px 
 var innerHeight = div.innerHeight（）; // 150 px 
 var outerHeight = div.outerHeight（）; // 150 px 
}）; 
 
< / script> 
< style type =text / css> 
 .test 
 {
 width：200px; 
 height：150px; 
背景：黑色; 
} 
< / style> 
< / head> 
< body> 
< div class =test>< / div> 
< / body> 
< / html>

在此示例中，您可以看到它们输出相同的结果。如果有人知道有什么区别，请告诉我适当的答案。

谢谢。

解决方案

你看到这些例子吗？看起来类似于你的问题。

I wrote some example to see what is the difference, but they display me same results for width and height.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

In this example you can see that they output same results. If anyone know what is the difference please show me appropriate answer.

Thanks.

解决方案

Did you see these examples? Looks similar to your question.

Working with widths and heights

jQuery - Dimensions

jQuery: height, width, inner and outer

这篇关于jQuery中width，innerWidth和outerWidth，height，innerHeight和outerHeight之间有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！