如何用javascript设置页面的宽度自适应

JavaScript013

如何用javascript设置页面的宽度自适应,第1张

使用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设置页面的宽度自适应即可成功。

你可以用document.body.scrollWidth

来获取,但兼容性本人没有做过测试。 给你个参考:网页可见区域宽:document.body.clientWidth

网页可见区域高:document.body.clientHeight

网页可见区域宽:document.body.offsetWidth(包括边线的宽)

网页可见区域高:document.body.offsetHeight(包括边线的宽)

网页正文全文宽:document.body.scrollWidth

网页正文全文高:document.body.scrollHeight

网页被卷去的高:document.body.scrollTop(IE7无效)

网页被卷去的左:document.body.scrollLeft(IE7无效)网页被卷去的高:document.documentElement.scrollTop(IE7有效)网页被卷去的左:document.documentElement.scrollLeft(IE7有效)

网页正文部分上:window.screenTop

网页正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的宽:window.screen.width

屏幕可用工作区高度:window.screen.availHeight

屏幕可用工作区宽度:window.screen.availWidth

相对于窗口左上角的X:window.event.clientX相对于窗口左上角的Y:window.event.clientY

相对于整个页面的X:window.event.X

相对于整个页面的Y:window.event.Y

获取屏幕宽度为:window.screen.width

获取视口宽度(页面宽度):document.documentElement.clientWidth

                window.addEventListener('resize', function() {

                    console.info( document.documentElement.clientWidth)

                    console.info( window.screen.width )

                })