zoukankan      html  css  js  c++  java
  • jQ获取浏览器window的高宽

    Window 对象
    Window 对象表示浏览器中打开的窗口。JavaScript 层级中的顶层对象,表示浏览器窗口。
    如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。
    注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。

    使用jQuery可以这样获取window的宽高:
    宽度: $(window).width()
    高度: $(window).height()


    实际效果:

     



    相同的屏幕不同的浏览器,即使都最大化,宽度也可能不一样,可以在IE,Chrome,火狐的浏览器中打开本页看看上面的数值。

    完整代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>获取浏览器window高宽-柯乐义</title>
    <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
    </head>
    <body>
    <div id="windowinfo_keleyi_com"></div>
    <script type="text/javascript">
    $("#windowinfo_ke" + "leyi_com").html("宽度: " + $(window).width() + ", 高度: " + $(window).height());
    </script>
    <div style="background-color:Red; 100%;height:150px;">欢迎</div>
    <div style="background-color:Yellow; 100%;height:150px;">hi</div>
    <div style="background-color:Silver; 100%;height:150px;">柯乐义</div>
    <div style="background-color:Aqua; 100%;height:150px;">keleyi.com</div>
    <div style="background-color:Fuchsia; 100%;height:150px;">keleyi</div>
    <div style="background-color:Green; 100%;height:150px;">keleyi.com</div>
    <div style="background-color:Blue; 100%;height:150px;">柯乐义</div>
    <div style="background-color:Olive; 100%;height:150px;">柯乐义 返回顶部</div>
    <div style="background-color:Green; 100%;height:150px;">A</div>
    <div style="background-color:Purple; 100%;height:150px;">jquery</div>
    <div style="background-color:Green; 100%;height:150px;"><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
    <div style="background-color:Lime; 100%;height:150px;">keleyi.com</div>
    <div style="background-color:Orange; 100%;height:150px;">完整代码</div>
    <div style="height:130px;"></div>

    <div id="downmsg_emessage" style="DISPLAY: block">
    <div id="downmsgBar">
    <div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()">&nbsp;</a></div>
    <div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
    <ul>
    <li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
    <li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" >jQuery UI修饰title气泡</a></li>
    <li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
    <li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
    <li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" >可改变大小DIV层</a></li>
    </ul>
    <div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a>   <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a>   <a href="http://keleyi.com/menu/cms/" target="_blank">CMS</a> </div>
    </div>
    </div>
    </body>
    </html>

    原文:http://keleyi.com/a/bjac/nk1dr8xn.htm

  • 相关阅读:
    Asp.net MVC3 Razor语法小记
    asp.net4的webform使用路由
    判断数据库中要创建的存储过程、函数等是否已经存在
    visual studio 解决方案版本互转
    sql语句创建表的时候加表注释和列注释
    Jquery在指定元素内查找元素(相对定位)
    .net便利的小方法
    sqlserver2008秘钥
    jquery星级评定效果(原创)
    清除GridView自带样式
  • 原文地址:https://www.cnblogs.com/jihua/p/jqwindow.html
Copyright © 2011-2022 走看看