准确获得页面、窗口高度及宽度的JS

2016-02-19 11:47 57 1 收藏

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享准确获得页面、窗口高度及宽度的JS的教程,热爱PS的朋友们快点看过来吧!

【 tulaoshi.com - Web开发 】

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight  document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

// for small pages with total height less then height of the viewport
if(yScroll  windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}

// for small pages with total width less then width of the viewport
if(xScroll  windowWidth){
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}


arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)
return arrayPageSize;
}
有幸找到了你的这个东东,帮我解决了问题,不过仔细看了下,好象大大的有点问题,参数值和名称上看好象有点对不上号哦. 
// for small pages with total height less then height of the viewport 
if(yScroll  windowHeight){ 
pageHeight = yScroll; 
} else { 
pageHeight = windowHeight; 


// for small pages with total width less then width of the viewport 
if(xScroll  windowWidth){ 
pageWidth = xScroll; 
} else { 
pageWidth = windowWidth; 
}

来源:https://www.tulaoshi.com/n/20160219/1598571.html

延伸阅读
IE6真是太疯狂了。今天由于项目需要做了这么一个布局:一个外部的相对定位div,内部一个绝对定位的div(right:0), 如图: 可是在IE6下查看,却变成了right:1px的效果了: IE6还有奇数宽度的bug,解决方案就是将外部相对定位的div宽度改成偶数。 查看源码: CSS代码 #out { width: 609px;/*这里宽度为奇数,bug就出现了!!改成偶数...
标签: windows10
Win10怎么自定义窗口标题栏高度以及滚动条宽度   1、按Win+R打开运行,输入regedit回车打开注册表编辑器; 2、展开 HKEY_CURRENT_USERControl PanelDesktopWindowMetrics; 3、在右侧找到CaptionHeight字符串值,它代表窗口标题栏的高度,其值计算方法为:-15*期望高度(像素)。比如,希望窗口标题栏高度为18,那么其值应该为-...
标签: Web开发
代码如下: function SetWinHeight(obj)  {  var win=obj;  if (document.getElementById)  {     if (win && !window.opera)     {      if (win.contentDocument && win.contentDocument.body.o...
标签: Web开发
当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 如上一段的代码,很多时候我们会把它所占的位置计算成width:120px,height:120px,因为在正常的理解下,padding是内边距,应该是包括在width里面的,而margin是外边距,所以width=margi...
标签: ASP
  <% Class ImgWHInfo '获取图片宽度和高度的类,支持JPG,GIF,PNG,BMP     Dim ASO     Private Sub Class_Initialize         Set ASO=Server.CreateObject("ADODB.Stream")         ASO.Mode=3     &...

经验教程

767

收藏

71
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部