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 相关文章推荐
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
JS图片预加载插件详解
Jun 21 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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
怎么使 Mysql 数据同步
2006/10/09 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
PHP PDO函数库详解
2010/04/27 PHP
php构造方法中析构方法在继承中的表现
2016/04/12 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
PHP时间函数使用详解
2019/03/21 PHP
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jquery表单验证需要做些什么
2015/11/17 Javascript
浅谈JS中的bind方法与函数柯里化
2016/08/10 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
python 远程统计文件代码分享
2015/05/14 Python
python3中int(整型)的使用教程
2017/03/23 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Django 缓存配置Redis使用详解
2019/07/23 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Python unittest生成测试报告过程解析
2020/09/08 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
一些Solaris面试题
2013/03/22 面试题
毕业生的自我鉴定
2013/10/29 职场文书
个人存款证明书
2014/10/18 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏