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 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
May 17 Javascript
深入理解JS正则表达式---分组
Jul 18 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 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
正则表达式语法
2006/10/09 Javascript
php学习笔记(三)操作符与控制结构
2011/08/06 PHP
PHP输出时间差函数代码
2013/01/28 PHP
input file获得文件根目录简单实现
2013/04/26 PHP
基于PHP异步执行的常用方式详解
2013/06/03 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP面向对象详解(三)
2015/12/07 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
js 匿名调用实现代码
2009/06/19 Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
JS控制阿拉伯数字转为中文大写示例代码
2013/09/04 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
Bootstrap开发实战之第一次接触Bootstrap
2016/06/02 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Python入门教程之运算符与控制流
2016/08/17 Python
python中的字典操作及字典函数
2018/01/03 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
使用 Python 玩转 GitHub 的贡献板(推荐)
2019/04/04 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
Linux内核产生并发的原因
2012/07/13 面试题
入团者的自我评价分享
2013/12/02 职场文书
24岁生日感言
2014/01/13 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
应届生面试求职信
2014/07/02 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis