jq 获取元素的尺寸

最新推荐文章于 2024-03-29 10:03:44 发布

哈哈绝

最新推荐文章于 2024-03-29 10:03:44 发布

阅读量741

点赞数

分类专栏： jq 学习笔记文章标签： jq 获取元素尺寸

本文链接：https://blog.csdn.net/qq_41194704/article/details/103169218

版权

学习笔记同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

jq 获取元素的尺寸

获取元素尺寸
jquery-3.4.1 是可以获取隐藏元素的宽高的，下面的方法都可以获取隐藏元素的宽高

方法	作用
width()	获取元素的内容宽度
height()	获取元素的内容高度
innerWidth()	获取元素（内容+padding）宽度
innerHeight()	获取元素（内容+padding）高度
outerWidth()	获取元素（内容+padding+border）宽度
outerHeight()	获取元素（内容+padding+border）高度
outerWidth(true)	获取元素（内容+padding+border+margin）宽度
outerHeight(true)	获取元素（内容+padding+border+margin）高度

其他常用尺寸

写法	作用
$(window).width()	获取浏览器可视区宽度
$(window).height()	获取浏览器可视区高度
$(document).width()	获取页面宽度
$(document).height()	获取页面高度
$('body').width()	获取页面宽度，body默认有8px的margin
$('body').height()	获取页面高度，body默认有8px的margin

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background: Red;
            padding: 10px;
            border: 5px black solid;
            margin: 3px;
            display: none;
        }
    </style>
    <script src="./jquery-3.4.1.js"></script>
</head>

<body style="height: 3000px;">
    <div></div>
    <script>
        //得到元素的内容宽度、高度 width() height()
        console.log($('div').width()); //100 
        console.log($('div').height()); //100 

        //得到元素的内容+padding innerWidth() innerHeight()
        console.log($('div').innerWidth()); //120
        console.log($('div').innerHeight()); //120 

        //得到元素的内容+padding+border outerWidth() outerHeight()
        console.log($('div').outerWidth());  //130
        console.log($('div').outerHeight()); //130

        //得到元素的内容+padding+border+margin outerWidth(true) outerHeight(true)
        console.log($('div').outerWidth(true));  //136
        console.log($('div').outerHeight(true)); //136

        //设置元素宽高
        $('div').width(300);
        $('div').height(300);
        console.log($('div').width()) //300
        $('div').innerWidth(300);
        console.log($('div').width());//280  内容=300-padding
        $('div').outerWidth(300)
        console.log($('div').width());//270 内容=300-padding-border
        $('div').outerWidth(300, true)
        console.log($('div').width()); //264 内容=300-padding-border-margin

        //原生js 是获取不到隐藏元素的宽高的
        console.log($('div').get(0).offsetWidth) //0 get将jq获取的元素转成js原生的元素 get参数不写的话，输出undefind
        //因为$('div')返回的对象是个数组，不管有没有值，返回的都是数组，所以需要加0

        //jq是可以获取隐藏元素的宽高的
        console.log($('div').width())  //264

        //其他尺寸
        //浏览器可视区的宽高 $(window).width() $(window).height
        console.log($(window).width())
        console.log($(window).height())

        //页面宽高 $(document).width() $(document).height() $('body').width() $('body').height()
        console.log($(document).width()); //877
        console.log($('body').width()); //861 //左右两边默认 margin 8px
    </script>
</body>
</html>