zoukankan      html  css  js  c++  java
  • jquery操作html元素之( 尺寸)

    jQuery 提供多个处理尺寸的重要方法:

    • width()
    • height()
    • innerWidth()
    • innerHeight()
    • outerWidth()
    • outerHeight()

    jQuery width() 和 height() 方法

    width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

    height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

    下面的例子返回指定的 <div> 元素的宽度和高度:

    实例

    $("button").click(function(){
      var txt="";
      txt+="Width: " + $("#div1").width() + "</br>";
      txt+="Height: " + $("#div1").height();
      $("#div1").html(txt);
    });
    

    jQuery innerWidth() 和 innerHeight() 方法

    innerWidth() 方法返回元素的宽度(包括内边距)。

    innerHeight() 方法返回元素的高度(包括内边距)。

    下面的例子返回指定的 <div> 元素的 inner-width/height:

    实例

    $("button").click(function(){
      var txt="";
      txt+="Inner  " + $("#div1").innerWidth() + "</br>";
      txt+="Inner height: " + $("#div1").innerHeight();
      $("#div1").html(txt);
    });
    

    jQuery outerWidth() 和 outerHeight() 方法

    outerWidth() 方法返回元素的宽度(包括内边距和边框)。

    outerHeight() 方法返回元素的高度(包括内边距和边框)。

    下面的例子返回指定的 <div> 元素的 outer-width/height:

    实例

    $("button").click(function(){
      var txt="";
      txt+="Outer  " + $("#div1").outerWidth() + "</br>";
      txt+="Outer height: " + $("#div1").outerHeight();
      $("#div1").html(txt);
    });
    

    outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

    outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

    实例

    $("button").click(function(){
      var txt="";
      txt+="Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
      txt+="Outer height (+margin): " + $("#div1").outerHeight(true);
      $("#div1").html(txt);
    });
    

    jQuery - 更多的 width() 和 height()

    下面的例子返回文档(HTML 文档)和窗口(浏览器视口)的宽度和高度:

    实例

    $("button").click(function(){
      var txt="";
      txt+="Document width/height: " + $(document).width();
      txt+="x" + $(document).height() + "
    ";
      txt+="Window width/height: " + $(window).width();
      txt+="x" + $(window).height();
      alert(txt);
    });
    

    下面的例子设置指定的 <div> 元素的宽度和高度:

    实例

    $("button").click(function(){
      $("#div1").width(500).height(500);
    });
    
  • 相关阅读:
    Virtual Drive Manager V1.3.2(小巧实用的虚拟光驱)绿色版
    WimTool(Wim映像处理工具) V1.30.2011.501 免费绿色版
    WinHex V18.7(16进制编辑器) 多国语言绿色版
    WinSnap屏幕截图 V4.5.6 官方最新版
    Wsyscheck(系统检测维护工具) v1.68.33绿色版
    XueTr 0.45 (手工杀毒辅助工具) 绿色版
    Colorful(Folders星语多彩文件夹) v1.7绿色版
    飞雪桌面日历软件 V8.6 免费绿色版
    Notepad++ V6.9.0 中文绿色便携版
    屏幕尺子(电脑尺子) 1.0 免费绿色版
  • 原文地址:https://www.cnblogs.com/Better-Me/p/4260638.html
Copyright © 2011-2022 走看看