JQuery——获取元素宽高

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

YUHUI01

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

阅读量344

点赞数

分类专栏： jQuery 文章标签： outerHeight()、innerHeight、Heig

本文链接：https://blog.csdn.net/YUHUI01/article/details/80873318

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、width() ( height() )

不传参时返回元素的宽度，传参时改变元素的宽度（参数可以为数字，也可以是带像素单位的字符串）

<style>
        div{background-color: rebeccapurple;height: 100px;width: 100px;}
    </style>
</head>
<body>
    <div>
        123456
    </div>
</body>
</html>
<script>
    $("div").height("400px")
    $("div").width(300)
</script>

2、innerHeight() ( innerWidth() )

返回元素的height+padding

<style>
        div{background-color: rebeccapurple;height: 100px;width: 100px;padding: 10px;margin: 5px;border: 5px solid forestgreen;}
    </style>
</head>
<body>
    <div>
        123456
    </div>
</body>
</html>
<script>
    console.log($("div").innerHeight(),$("div").innerWidth())//120  120
</script>

3、outerHeight() ( outerWidth() )

不传参时返回border+Height+padding

向方法传入参数true时，返回border+Height+padding+margin

 <style>
        div{background-color: rebeccapurple;height: 100px;width: 100px;padding: 10px;margin: 20px;border: 5px solid forestgreen;}
    </style>
</head>
<body>
    <div>
        123456
    </div>
</body>
</html>
<script>
    console.log($("div").outerHeight(),$("div").outerWidth())         //130 130
    console.log($("div").outerHeight(true),$("div").outerWidth(true))//170 170
</script>

javascript中获取宽高的方法

YUHUI01

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery——获取元素宽高

1、width() ( height() )不传参时返回元素的宽度，传参时改变元素的宽度（参数可以为数字，也可以是带像素单位的字符串）&lt;style&gt; div{background-color: rebeccapurple;height: 100px;width: 100px;} &lt;/style&gt;&lt;/head&gt;&lt;body&gt;...
复制链接

扫一扫

专栏目录