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 判断一个元素是否在页面中存在
Dec 27 Javascript
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
JavaScript模拟push
Mar 06 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 jQuery
vue.js简单配置axios的方法详解
Dec 13 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
如何使用JavaScript策略模式校验表单
Apr 29 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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
模拟xcopy的函数
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php sprintf()函数让你的sql操作更安全
2008/07/23 PHP
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
使用php清除bom示例
2014/03/03 PHP
php实现购物车功能(上)
2020/07/23 PHP
php中final关键字用法分析
2016/12/07 PHP
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
2018/05/09 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python 转义字符详细介绍
2017/03/21 Python
机器学习python实战之手写数字识别
2017/11/01 Python
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
python批量赋值操作实例
2018/10/22 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
幼儿园门卫制度
2014/01/29 职场文书
给校长的建议书600字
2014/05/15 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
大学生工作求职信
2014/06/23 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
护士先进个人总结
2015/02/13 职场文书
2015年度员工自我评价范文
2015/03/11 职场文书
回复函格式及范文
2015/07/14 职场文书
Java输出Hello World完美过程解析
2021/06/13 Java/Android
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL