jQuery获取元素宽高(内边距、边框和外边距)

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <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>

运行结果:
jQuery获取元素宽高(内边距、边框和外边距)_第1张图片

你可能感兴趣的:(jQuery)