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

跨浏览器获取位置

<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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值