跨浏览器用javascript获取窗口的位置和大小

转载 2015年07月07日 08:52:36

跨浏览器获取位置

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> leftX = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenLeft == <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'number'</span> ? <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenLeft : <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenX;
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> topY = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenTop == <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'number'</span> ? <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenTop : <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.screenY;</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

firefox浏览器不支持screenLeft和scrennTop,但是支持screenX和screenY;ie浏览器支持screenLeft和scrennTop,但是不支持screenX和screenY 
跨浏览器获取大小

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> width = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.innerWidth;      <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.必须有,因为IE不支持
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> height = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.innerHeight;        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>如果支持inner的,那么就使用它,

<span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>不支持的就是用<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>对象的方法

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">typeof</span> width != <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'number'</span>) {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.compatMode == <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'CSS1Compat'</span>) {
        width = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.documentElement.clientWidth; <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>标准ie
        height = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.documentElement.clientHeight;
    } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> {   <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>非标准ie
        width = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.body.clientWidth;    
        height = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.body.clientHeight;
    }
}</code>

Javascript获取窗口的大小及位置

捣腾了二个多小时,终于找到获取窗口的方法了。现在做一个笔记,这种错误我可不想在犯一次!呵呵....... Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简...

Javascript获取各种浏览器可见窗口大小 【转】

网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body....
  • jyb123
  • jyb123
  • 2012年03月12日 15:27
  • 175

用 Javascript 获取頁面大小、窗口大小和滾動條位置

頁面大小、窗口大小和滾動條位置這三個數值在不衕的瀏覽器例如 Firefox 和 IE 中有著不衕的實現。即使在衕一種瀏覽器例如 IE 中,不衕版本也有不衕的實現。 本文給出兩個能兼容目前所有瀏覽...
  • sysande
  • sysande
  • 2011年12月15日 05:18
  • 202

Javascript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

var wid=100; document.getElementById("someid").style.width=wid; 设置高度 /********************  ...

JS获取浏览器窗口大小,屏幕,网页宽高

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

关于获取各种浏览器可见窗口大小的一点点研究

关于获取各种浏览器可见窗口大小的一点点研究 function getInfo() { var s = ""; s = " 网页可见区域宽:" document.body.clientWid...

JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸

代码如下: js获取height和width总结 $(document).ready(function() { alert("浏览器当前窗口可视区域高度:"+$(wi...

1.6 如何设置窗口的大小和位置

  • 2013年04月04日 17:00
  • 12KB
  • 下载

javaScript获取元素位置以及元素页面大小总结

js获取元素位置以及元素页面大小总结: 一:元素位置: js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:跨浏览器用javascript获取窗口的位置和大小
举报原因:
原因补充:

(最多只允许输入30个字)