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);
    });
    
  • 相关阅读:
    divide two numbers using + opertor
    广播
    如何计算传递进来的参数个数 ?
    如何在脚本中使用参数 ?
    shell脚本中“$?”标记的用途是什么?
    JAVA BigDecimal的相加
    【推荐】腾讯android镜像(做Android开发的得好好利用下这个网站,国内的大公司还是可以滴……)
    AndroidDevTools简介
    Android SDK代理服务器解决国内不能更新下载问题
    SugarCRM 插件介绍
  • 原文地址:https://www.cnblogs.com/Better-Me/p/4260638.html
Copyright © 2011-2022 走看看