源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-01-09 01:53 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JQuery获取各种宽度、高度(format函数)实例
[u]复制代码[/u] 代码如下:
<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>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部