jQuery获取各种元素宽高

最新推荐文章于 2024-03-29 10:03:44 发布

原创最新推荐文章于 2024-03-29 10:03:44 发布 · 598 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #js #网页前端 #前端

前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了使用jQuery进行元素尺寸操作的方法，包括获取和设置元素的宽度、高度、内外边距和边界。通过实例展示了如何利用$.width(), $.innerWidth(), $.outerWidth(), $.height(), $.innerHeight(), $.outerHeight(), $(window).height(), $(window).width(), $(document).height(), $(document).width(), $(document.body).height(), $(document.body).width(), $(document).scrollTop(), $(document).scrollLeft()等函数来精确控制网页布局。

$("div").width(); //获取元素的宽高无单位像素值，不包括padding,border,margin
$("div").innerWidth(); //获取元素的宽高 + padding 无单位像素值
$("div").outerWidth(); //获取元素的宽高 + padding + border 无单位像素值
$("div").outerWidth(true); //获取元素宽高 + padding + border + margin 无单位像素值

$("div").height(); //获取元素的宽高无单位像素值，不包括padding,border,margin
$("div").innerHeight(); //获取元素的宽高 + padding 无单位像素值
$("div").outerHeight(); //获取元素的宽高 + padding + border 无单位像素值
$("div").outerHeight(true); //获取元素宽高 + padding + border + margin 无单位像素值

$(window).height(); //获取（浏览器）窗口（视口）高度的无单位像素值
$(window).width(); //获取（浏览器）窗口（视口）宽度的无单位像素值
$(document).height(); //获取正在渲染的文档高度的无单位像素值
$(document).width(); //获取正在渲染的文档宽度的无单位像素值
$(document.body).height(); //获取body的高度
$(document.body).width(); //获取body的宽度
$(document).scrollTop(); //获取滚动条到顶部的垂直高度（即网页往下翻了的距离）
$(document).scrollLeft(); //获取滚动条到左边的垂直宽度（即网页往右翻了的距离）

摘自Stack Overflow的评论：（原问题）

$(window).height() gets you an unit-less pixel value of the height of the (browser) window aka viewport. With respect to the web browsers the viewport here is visible portion of the canvas(which often is smaller than the document being rendered).

$(document).height() returns an unit-less pixel value of the height of the document being rendered. However, if the actual document’s body height is less than the viewport height then it will return the viewport height instead.