jQuery来了--尺寸,返回/设置元素的宽高度

jQuery可用于处理元素和浏览器窗口的尺寸

jQuery处理尺寸的方法:

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

width()和height()方法

  • width()方法设置或返回元素的宽度(不包括内边距,边框或外边距
  • height()方法设置或返回元素的高度(不包括内边距,边框或外边距

例.
返回指定的

元素的宽度和高度:

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="Width:"+$("#div1").width()+"
"
+"Height:"+$("#div1").height(); $("#div1").html(txt); }); });
script> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px 3px 10px 3px;border:1px solid blue;background-color:lightblue;">div> <button>显示div的尺寸button> body>

运行结果:
jQuery来了--尺寸,返回/设置元素的宽高度_第1张图片

点击按钮后:
jQuery来了--尺寸,返回/设置元素的宽高度_第2张图片

例.
设置指定的

元素的宽度和高度:

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
              $("#div1").width(350).height(320);
              //等效于$("#div1").height(320).width(350);
              //等效于 $("#div1").width(320);
$("#div1").height(320);
          });
      });
   script>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px 3px 10px 3px;border:1px solid blue;background-color:lightblue;">div>
<button>调整div的尺寸button>
body>

运行结果:
jQuery来了--尺寸,返回/设置元素的宽高度_第3张图片

点击按钮后:
jQuery来了--尺寸,返回/设置元素的宽高度_第4张图片

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

<body>
   <script>
      $(document).ready(function(){
         $("button").click(function(){
            var txt="";
            txt="文档尺寸:"+$(document).width()+"x"+$(document).height()+"\n"+"窗口尺寸:"+$(window).width()+"x"+$(window).height();
            alert(txt);
         });
      });
   script>

<button>显示文档和窗口的尺寸button>
body>

运行结果:
这里写图片描述

点击按钮后:
jQuery来了--尺寸,返回/设置元素的宽高度_第5张图片

innerWidth() 和 innerHeight() 方法

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

例.
返回指定的

元素的innerWidth或innerHeight:

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="innerWidth:"+$("#div1").innerWidth()+"
"
+"innerHeight:"+$("#div1").innerHeight(); $("#div1").html(txt); }); });
script> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px 3px 10px 3px;border:1px solid blue;background-color:lightblue;">div> <button>显示div的尺寸button> body>

运行结果:
jQuery来了--尺寸,返回/设置元素的宽高度_第6张图片

点击按钮后:
jQuery来了--尺寸,返回/设置元素的宽高度_第7张图片

outerWidth() 和 outerHeight() 方法

  • outerWidth()方法返回元素的宽度(包括内边距和边框
  • outerHeight()方法返回元素的高度(包括内边距和边框
  • outerWidth(true)方法返回元素的宽度(包括内边距,边框和外边距
  • outerHeight(true)方法返回元素的高度(包括内边距,边框和外边距

例.
返回指定的

元素的outerWidth或outerHeight:

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="outerWidth:"+$("#div1").outerWidth()+"
"
+"outerHeight:"+$("#div1").outerHeight()+"
"
+"outerWidth(true):"+$("#div1").outerWidth(true)+"
"
+"outerHeight(true):"+$("#div1").outerHeight(true); $("#div1").html(txt); }); });
script> <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px 3px 10px 3px;border:1px solid blue;background-color:lightblue;">div> <button>显示div的尺寸button> body>

运行结果:
jQuery来了--尺寸,返回/设置元素的宽高度_第8张图片

点击按钮后:

jQuery来了--尺寸,返回/设置元素的宽高度_第9张图片

你可能感兴趣的:(jQuery来了)