跳转至

Jquery 尺寸

write by 2019/6/15 00:27

1. 介绍

  通过 jQuery，很容易处理元素和浏览器窗口的尺寸。jQuery 提供多个处理尺寸的重要方法

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

尺寸

2. 边距

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

边距

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        .div {
            height: 150px;
            width: 150px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="div"></div>
<button id="btn">显示尺寸</button>
</body>
<script>
    $(function () {
        $('#btn').click(function () {
            var msg="";
            msg += "div 的宽度是: " + $(".div").width() + "</br>";
            msg += "div 的高度是: " + $(".div").height();
            $('.div').html(msg)
        });
    })
</script>
</html>

边距

3. 内边距

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

外边距

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        .div {
            height: 200px;
            width: 200px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="div"></div>
<button id="btn">显示尺寸</button>
</body>
<script>
    $(function () {
        $('#btn').click(function () {
            var msg="";
            msg+="div 宽度: " + $(".div").width() + "</br>";
            msg+="div 高度: " + $(".div").height() + "</br>";
            msg+="div 宽度，包含内边距: " + $(".div").innerWidth() + "</br>";
            msg+="div 高度，包含内边距: " + $(".div").innerHeight();
            $('.div').html(msg)
        });
    })
</script>
</html>

内边距

4. 外边距

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

外边距

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>caimengzhi blog jquery</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style type="text/css">
        .div {
            height: 200px;
            width: 300px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightblue;
        }
    </style>
</head>
<body>
<div class="div"></div>
<button id="btn">显示尺寸</button>
</body>
<script>
    $(function () {
        $('#btn').click(function () {
            var msg="";
            msg+="div 宽度: " + $(".div").width() + "</br>";
            msg+="div 高度: " + $(".div").height() + "</br>";
            msg+="div 宽度，包含内边距和边框: " + $(".div").outerWidth() + "</br>";
            msg+="div 高度，包含内边距和边框: " + $(".div").outerWidth();
            $('.div').html(msg)
        });
    })
</script>
</html>

外边距