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

来源：互联网发布：网络订餐平台监管编辑：程序博客网时间：2024/06/05 12:30

返回元素的宽、高。
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>

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

阅读全文

0 0