JQuery获取各种宽度、高度(format函数)实例


Posted in Javascript onMarch 04, 2013
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>获取页面宽度</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $.format = function (source, params) {
            if (arguments.length == 1)
                return function () {
                    var args = $.makeArray(arguments);
                    args.unshift(source);
                    return $.format.apply(this, args);
                };
            if (arguments.length > 2 && params.constructor != Array) {
                params = $.makeArray(arguments).slice(1);
            }
            if (params.constructor != Array) {
                params = [params];
            }
            $.each(params, function (i, n) {
                source = source.replace(new RegExp("\\{" + i + "\\}", "g"), n);
            });
            return source;
        };
        /*------------以上是字符串format函数----------------*/
        $(document).ready(function () {
            $("button").click(function () {
                var d=$("#div1");
                var txt = "";
                txt += $.format("width(): {0}</br>", d.width());
                txt += $.format("height(): {0}</br>", d.height());
                txt += $.format("Inner Width: {0}</br>", d.innerWidth());
                txt += $.format("Inner Height: {0}</br>", d.innerHeight());
                txt += $.format("Outer Width: {0}</br>", d.outerWidth());
                txt += $.format("Outer Height: {0}</br>", d.outerHeight());
                txt += $.format("outerWidth(true): {0}</br>", d.outerWidth(true));
                txt += $.format("outerHeight(true): {0}</br>", d.outerHeight(true));
                txt += $.format("HTML文档宽度: {0}</br>", $(document).width());
                txt += $.format("HTML文档高度: {0}</br>", $(document).height());
                txt += $.format("浏览器视口宽度: {0}</br>", $(window).width());
                txt += $.format("浏览器视口高度: {0}</br>", $(window).height());
                $("#div1").html(txt);
            });
        });
</script>
</head>
<body>
<div id="div1" style="height:auto;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br/>
<button>显示当前各种尺寸</button>
    <p><a href="http://4welove.taobao.com" target="_blank">手机话费、Q币、游戏充值</a></p>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
<p>innerWidth() 方法返回元素的宽度(包括内边距)。                     </p>
<p>innerHeight() 方法返回元素的高度(包括内边距)。                    </p>
<p>outerWidth() 方法返回元素的宽度(包括内边距和边框)。               </p>
<p>outerHeight() 方法返回元素的高度(包括内边距和边框)。              </p>
<p>outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。   </p>
<p>outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。  </p>
<p>返回文档(HTML 文档)$(document).height()的高度</p>
<p>返回窗口(浏览器视口)$(window).height()的高度</p>
</body>
</html>
Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
Aug 23 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
Aug 11 Javascript
原生JS实现N级菜单的代码
May 21 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
npm 常用命令详解(小结)
Jan 17 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 #Javascript
js给dropdownlist添加选项的小例子
Mar 04 #Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 #Javascript
利用js实现选项卡的特别效果的实例
Mar 03 #Javascript
DWZ刷新dialog解决方法
Mar 03 #Javascript
js 控制下拉菜单刷新的方法
Mar 03 #Javascript
可在线编辑网页文字效果代码(单击)
Mar 02 #Javascript
You might like
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
手动用webpack搭建第一个ReactApp的示例
2018/04/11 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
2018/05/10 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
js html实现计算器功能
2018/11/13 Javascript
Vue.js 图标选择组件实践详解
2018/12/03 Javascript
解决layer弹出层自适应页面大小的问题
2019/09/16 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
Django视图之ORM数据库查询操作API的实例
2017/10/27 Python
关于Python数据结构中字典的心得
2017/12/04 Python
Python 错误和异常代码详解
2018/01/29 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
从DataFrame中提取出Series或DataFrame对象的方法
2018/11/10 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
通过HTML5规范搞定i、em、b、strong元素的区别
2017/03/04 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Roots加拿大官网:加拿大休闲服饰品牌
2016/10/24 全球购物
新学期教师寄语
2014/04/02 职场文书
家长会学生演讲稿
2014/04/26 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
讲文明倡议书
2015/04/29 职场文书
入队仪式主持词
2015/07/04 职场文书
Jpa Specification如何实现and和or同时使用查询
2021/11/23 Java/Android