关于JavaScript获取高，宽的方法，以及移动窗口的方法

深藏阁楼爱情的钟 2022-05-04 05:58 144阅读 0赞

## Screen: ##

//获取网页与屏幕顶端（左端）的距离  
console.log('window.screenTop:'+window.screenTop);//screenLeft  
console.log('window.screenX:'+window.screenX);//screenY  
//获取屏幕工作区的高度  
console.log('window.screen.availHeight:'+window.screen.availHeight);//availleft availtop availwidth  
//获取整个屏幕的高度  
console.log('window.screen.height:'+window.screen.height);//width

## Offset： ##

offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度  
offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置  
offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置

## Scroll： ##

window.scrollY / window.scrollX  被卷去的高和宽

document.body.scrollTop / document.body.scrollLeft   被卷去的高和宽

## event: ##

event.clientX 相对文档的水平座标     event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标     event.offsetY 相对容器的垂直坐标

## inner和outter： ##

innerWidth：获取元素的当前计算高度值,包括padding，但是不包括border。

outterWidth：获取元素的当前计算高度值,包括padding，border和选择性的margin。

## 可视区的高和宽： ##

"网页可见区域宽："+document.body.clientWidth  
"网页内容区域高："+document.body.clientHeight  
"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth   
"网页内容区域高(包括边线的宽)："+document.body.offsetHeight

“网页可见区域”+document.documentElement.clientHeight

## 全文的高和宽： ##

document.body.scrollHeight  /   document.body.scrollWidth

--------------------

## 移动浏览器窗口的方法： ##

// 移动窗口到指定坐标（iX,iY） window.moveTo(iX, iY)

// 窗口的位置不断的加（iX,iY） window.moveBy(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y（绝对滚动） window.scrollTo(iX, iY)

// 滚动窗口的屏幕位置到指定的偏移x 、y（相对滚动） window.scrollBy(iX, iY)

// 改变窗口大小到指定的高度与宽度（绝对改变大小） window.resizeTo(iWidth, iHeight)

// 改变窗口大小到指定的高度与宽度（相对改变大小） window.resizeBy(iX, iY)

cc.MoveTo是“移动到这里"，而cc.MoveBy则是“相对于之前点再移动”

--------------------

## 打开新窗口的方法以及参数说明： ##

**window.open(*URL,name,specs,replace*)**

<table> 
 <tbody> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
  </tr> 
  <tr> 
   <td>URL</td> 
   <td>可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>可选。指定target属性或窗口的名称。支持以下值： 
    <ul> 
     <li>_blank - URL加载到一个新的窗口。这是默认</li> 
     <li>_parent - URL加载到父框架</li> 
     <li>_self - URL替换当前页面</li> 
     <li>_top - URL替换任何可加载的框架集</li> 
     <li><em>name</em>&nbsp;- 窗口名称</li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>specs</td> 
   <td>可选。一个逗号分隔的项目列表。支持以下值：<br> &nbsp; 
    <table> 
     <tbody> 
      <tr> 
       <td>channelmode=yes|no|1|0</td> 
       <td>是否要在影院模式显示 window。默认是没有的。仅限IE浏览器</td> 
      </tr> 
      <tr> 
       <td>directories=yes|no|1|0</td> 
       <td>是否添加目录按钮。默认是肯定的。仅限IE浏览器</td> 
      </tr> 
      <tr> 
       <td>fullscreen=yes|no|1|0</td> 
       <td>浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器</td> 
      </tr> 
      <tr> 
       <td>height=pixels</td> 
       <td>窗口的高度。最小.值为100</td> 
      </tr> 
      <tr> 
       <td>left=pixels</td> 
       <td>该窗口的左侧位置</td> 
      </tr> 
      <tr> 
       <td>location=yes|no|1|0</td> 
       <td>是否显示地址字段.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>menubar=yes|no|1|0</td> 
       <td>是否显示菜单栏.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>resizable=yes|no|1|0</td> 
       <td>是否可调整窗口大小.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>scrollbars=yes|no|1|0</td> 
       <td>是否显示滚动条.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>status=yes|no|1|0</td> 
       <td>是否要添加一个状态栏.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>titlebar=yes|no|1|0</td> 
       <td>是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>toolbar=yes|no|1|0</td> 
       <td>是否显示浏览器工具栏.默认值是yes</td> 
      </tr> 
      <tr> 
       <td>top=pixels</td> 
       <td>窗口顶部的位置.仅限IE浏览器</td> 
      </tr> 
      <tr> 
       <td>width=pixels</td> 
       <td>窗口的宽度.最小.值为100</td> 
      </tr> 
     </tbody> 
    </table></td> 
  </tr> 
  <tr> 
   <td>replace</td> 
   <td>Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值： 
    <ul> 
     <li>true - URL 替换浏览历史中的当前条目。</li> 
     <li>false - URL 在浏览历史中创建新的条目。</li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

window.open('http://www.runoob.com', '\_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');

window.open('','','width=200,height=100');

--------------------