文章摘要
本文介绍了一段JavaScript代码，用于获取网页窗口的尺寸并动态调整页面布局。代码通过`findDimensions`函数获取`winWidth`和`winHeight`，分别表示窗口的宽度和高度。该函数通过内联脚本和外部脚本获取窗口大小，并在`document.documentElement`内部进一步检测。函数还动态修改CSS样式，将页面宽度和高度分别设置为`1100px`或`100%`，`600px`或`100%`，以适应不同屏幕尺寸。此外，函数通过`window.onresize`事件调用`findDimensions`，确保窗口缩小时能够重新获取并应用新的尺寸设置。代码整体用于实现响应式布局功能。
var winWidth=0;
var winHeight=0;
function findDimensions()
{
//获取窗口宽度
if (window.innerWidth)
{
winWidth=window.innerWidth;
}
else if ((document.body) && (document.body.clientWidth))
{
winWidth=document.body.clientWidth; //获取窗口高度
}
if (window.innerHeight)
{
winHeight=window.innerHeight;
}
else if ((document.body) && (document.body.clientHeight))
{
winHeight=document.body.clientHeight;
}
//通过深入Document内部对body进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight=document.documentElement.clientHeight;
winWidth=document.documentElement.clientWidth;
}
var cssSize=document.styleSheets[0].rules||document.styleSheets[0].cssRules;
if(winWidth < 1100)
{
cssSize[0].style.width=”1100px”;
}
else
{
cssSize[0].style.width=”100%”;
}
if(winHeight < 600)
{
cssSize[0].style.height=”600px”;
}
else
{
cssSize[0].style.height=”100%”;
}
}
window.onresize=findDimensions;
function pageInit() {
//调用函数，获取数值
findDimensions();
}
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
