您现在的位置: 365建站网 > 365文章 > jquery获取元素的所有宽高(包括边框 内边距和外边距)

jquery获取元素的所有宽高(包括边框 内边距和外边距)

文章来源:365jz.com     点击数:159    更新时间:2024-09-18 17:07   参与评论

在jQuery中,可以使用.innerWidth()和.outerWidth()方法来获取元素的宽度,包括可选的内边距(padding)。对于外边距(margin)和边框(border),可以使用.outerWidth()方法,传入true作为参数以包括这些额外的尺寸。

width() - 返回元素的宽度。
height() - 返回元素的高度。
innerWidth() 方法返回元素的宽度(包括内边距)。                    
innerHeight() 方法返回元素的高度(包括内边距)。                    
outerWidth() 方法返回元素的宽度(包括内边距和边框)。             
outerHeight() 方法返回元素的高度(包括内边距和边框)。        
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。  
返回文档(HTML 文档)$(document).height()的高度
返回窗口(浏览器视口)$(window).height()的高度


用一个实例来说明:

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



如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛

发表评论 (159人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
昵称:
最新评论
------分隔线----------------------------

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间:9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号