JS中的宽度

JavaScript023

JS中的宽度,第1张

现实世间里，一个物体的宽度是明确的、没有异议的，而在JS的世界里，却有好几种获取div宽度的方法，有时这些方法获取的结果是一致的，有时确不尽相同，这一度让我很困惑。

为了理解width，我们创建一个宽200、高100的div来辅助学习：

首先我先给上结论，之后我会用例子验证结论的正确性：

其中，clientWidth和offsetWidth是原生dom对象的属性，其余的是jQuery对象的方法。

那么下面我们开始验证结论的正确性，此时内容宽度是200px，padding和border都是0px。

因此：

再用浏览器开发者工具(F12)的console验证，此时结论正确：

接着，我们给div加上左右padding(左右padding分别设为20px和30px)：

如果你们跟着写这个demo进行验证，可以发现，在浏览器中，这个div变宽了，那是因为此时用css设定的宽度200是针对内容的，而div的可视区域包括padding和border，因此padding变大了，div也就变大了。

我们接着算现在各种方式的宽度：

验证：

我们再给div加上左右border(左右边框分别设为10px和15px)：

计算宽度：

验证：

最后，我们给div加上左右margin(左右margin分别设为16px和32px)：

计算宽度：

验证：

至此幸不辱命，结论悉数验证通过(验证使用的是谷歌核心的浏览器)，不过还有一点要说明一下：

上面我们说过，css设定的宽度200是针对内容的，其实当我们给div加上样式 box-sizing:border-box 的时候， width:200px 的作用范围就变成也包括border和padding，我们再来验证一下上面最后的那个例子，首先计算宽度：

验证：

此种情况下，结论依然正确，希望至此大家已经理解各种获取div宽度的属性和方法。

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px，则：

<img src="images/pic.png" width="100" height="100" />

或者：

<img src="images/pic.png" style="width:100pxheight:100px" />

当页面中图片非常多，且要求每张图片的大小依据其父容器来固定怎么办？可以使用max-weight：

img {max-weight:100%}

这样图片会自动缩放到和其父容器等宽。

使用javascript设置页面的宽度自适应的方法如下：

首先新建一个test.aspx空白页面，如图所示：

将一个div拖动到新建的test.aspx空白页面中，其中div的源码为<div id="Div1" runat="server"></div>。如图所示：

将JavaScript函数进行定义，其中源码为<script type="text/javascript"></script>。函数名可以自定义为function resizeDiv(minusWidth, minusHeight) {}。在自定义的函数中包含了高度和宽度，如图所示：

其中函数的详细内容为，如图所示：

函数调用完成之后，开始调用函数，页面默认剩余的宽度是20px和40px。如图：

函数调用完成之后，利用JavaScript设置页面的宽度自适应即可成功。