jQuery获取元素宽高（内边距、边框和外边距）

最新推荐文章于 2023-07-31 16:55:36 发布

weijia_kmys

最新推荐文章于 2023-07-31 16:55:36 发布

阅读量1.2w

点赞数 5

分类专栏： JavaScript 文章标签： jquery html css盒子内边距外边距

本文链接：https://blog.csdn.net/weijia_kmy/article/details/78876210

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

返回元素的宽、高。
width() height()
返回元素的宽、高（包括内边距）。
innerWidth() innerHeight()
返回元素的宽度（包括内边距和边框）。
outerWidth() outerHeight()
返回元素的宽度（包括内边距、边框和外边距）
outerWidth(true) outerHeight(true)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .div1 {
            width: 100px;
            height: 100px;
            padding: 100px;
            margin: 100px;
            border: 10px solid #00FFFF;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        var div = $(".div1");
        // 返回元素的宽、高
        var width = div.width();
        var height = div.height();
        console.log("宽度:" + width + " 高度:" + height);
        // 返回元素的宽、高（包括内边距）
        var innerWidth = div.innerWidth();
        var innerHeight = div.innerHeight();
        console.log("包括内边距 宽度:" + innerWidth + " 高度:" + innerHeight);
        // 返回元素的高度（包括内边距和边框）
        var outerWidth = div.outerWidth();
        var outerHeight = div.outerHeight();
        console.log("包括内边距和边框 宽度:" + outerWidth + " 高度:" + outerHeight);
        //  返回元素的高度（包括内边距、边框和外边距）
        var outerWidthTrue = div.outerWidth(true);
        var outerHeightTrue = div.outerHeight(true);
        console.log("包括内外边距和边框 宽度:" + outerWidthTrue + " 高度:" + outerHeightTrue);
    });
</script>
</body>
</html>

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

weijia_kmys

关注

5
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
jQuery获取元素宽高（内边距、边框和外边距）

返回元素的宽、高。 width() height() 返回元素的宽、高（包括内边距）。 innerWidth() innerHeight() 返回元素的宽度（包括内边距和边框）。 outerWidth() outerHeight() 返回元素的宽度（包括内边距、边框和外边距） outerWidth(true) outerHeight(true)<!doctype html><html
复制链接

扫一扫

专栏目录