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

最新推荐文章于 2024-07-26 15:59:09 发布

panlu666_pl

最新推荐文章于 2024-07-26 15:59:09 发布

阅读量1.2k

点赞数 1

分类专栏： jQuery来了文章标签： jquery 尺寸元素宽高度浏览器窗口宽高度

本文链接：https://blog.csdn.net/panlu666_pl/article/details/72869103

版权

jQuery来了专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

jQuery处理尺寸的方法：

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

width()和height()方法

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

例.
返回指定的<div>元素的宽度和高度：

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="Width:"+$("#div1").width()+"<br>"+"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>

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

点击按钮后：
这里写图片描述

例.
设置指定的<div>元素的宽度和高度：

<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>

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

点击按钮后：
这里写图片描述

例.
返回文档（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>

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

点击按钮后：
这里写图片描述

innerWidth() 和 innerHeight() 方法

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

例.
返回指定的<div>元素的innerWidth或innerHeight：

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="innerWidth:"+$("#div1").innerWidth()+"<br>"+"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>

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

点击按钮后：
这里写图片描述

outerWidth() 和 outerHeight() 方法

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

例.
返回指定的<div>元素的outerWidth或outerHeight：

<body>
   <script>
      $(document).ready(function(){
          $("button").click(function(){
             var txt="";
             txt="outerWidth:"+$("#div1").outerWidth()+"<br>"+"outerHeight:"+$("#div1").outerHeight()+"<br>"+"outerWidth(true):"+$("#div1").outerWidth(true)+"<br>"+"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>

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

点击按钮后：

这里写图片描述

panlu666_pl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery来了--尺寸，返回/设置元素的宽高度

jQuery可用于处理元素和浏览器窗口的尺寸jQuery处理尺寸的方法：width()height()innerWidth()innerHeight()outerWidth()outerHeight()width()和height()方法width()方法设置或返回元素的宽度（不包括内边距，边框或外边距）height()方法设置或返回元素的高度（不包括内边距，边框或外边距）例.
复制链接

扫一扫

专栏目录