访问元素的尺寸和坐标

最新推荐文章于 2021-06-02 13:44:25 发布

小田同學

最新推荐文章于 2021-06-02 13:44:25 发布

阅读量454

点赞数

分类专栏： jQuery 文章标签： outerWidth offset innerWidth

本文链接：https://blog.csdn.net/Sabrina_TSM/article/details/51145457

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>访问元素的尺寸和坐标</title>
    <style type="text/css">
        .big{
            position: absolute;
            left:50px;
            top:100px;
            width: 400px;
            height: 450px;
            background-color: #ccc;
            overflow: auto;
        }
        .small{
            margin: 50px;
            padding: 30px;
            border: 20px solid blue;
            width:200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div class="big">
    <div class="small">
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX<br/>
        XXXXXXXXXXXXXXXXXXXXXXX
    </div>
</div>


<script type="application/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        var w = $(".big").width();//width()方法用于获取内容的宽度
        var h = $(".big").height();//width()方法用于获取内容的高度
        console.info("外框宽度为："+w+"外框高度为："+h);
        //获取坐标
        var p=$(".big").position();//position()用于获取左上角的坐标
        console.info("外框左上角定点坐标为："+p.left+","+ p.top);
        //得到内框的宽度和高度
        console.info("内框宽度为"+$(".small").width()+";内框的高度为"+$(".small").height());
        //求内框坐标不能用position()
        //position()是当前节点相对于父节点的位移量，offset用于获取指定组件与窗口之间的距离
        console.info("外框左上角定点坐标为："+$(".small").offset().left+","+$(".small").offset().top);
        //得到内框的内部尺寸（不包含边框）
        console.info("内框的内部尺寸为：" + $(".small").innerWidth() +","+ $(".small").innerHeight());
        //得到内框的外部尺寸(不包含外边距)
        console.info("内框的外部尺寸为："+$(".small").outerWidth() +"," + $(".small").outerHeight());
        //得到内框的外部尺寸（包含外边距）
        //设置为true的时候，则包含外边距
        console.info("内框的外部尺寸（包含外边距）:"+$(".small").outerWidth(true) +"," + $(".small").outerHeight(true));

    })
</script>
</body>
</html>

小田同學

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
访问元素的尺寸和坐标

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>访问元素的尺寸和坐标</title> <style type="text/css"> .big{ position: absolute; left:50px;
复制链接

扫一扫