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

JavaScript0376

如何用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

运用js获取div宽度,原生JS获取DIV的属性有两种方法,js 获取方法命令如下:

currentStyle和getComputedStyle,前者是兼容IE端的,后者也兼容W3C,两者内核不同,所以就有两种兼容的写法。

如果只是单独的获取某个属性值可以这样写:

obj.currentStyle[属性名]这种不兼容-webkit-内核的,

所以一般是封装成一个函数可以到处调用,而且不止针对某个属性值。

function getStyle(obj,styleName){if(obj.currentStyle){return obj.currentStyle[styleName]}else{return getComputedStyle(obj,null)[styleName]

}

}

上面是封装好一个函数,可以直接调用。

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。