javascript核心技术(三十二)Jquery中取元素的尺寸 height innerHeight outerHeight

[复制链接]
查看: 1061|回复: 31
发表于 2023-1-26 21:03:32 | 显示全部楼层 | 阅读模式
在前面我们已经讲过如何使用jquery来设置css样式,与原生js的语法同理,使用相同的命令,只要不写参数就是取。
语法如下:
  1. $('#btn').height();//取出不包括内边距和边框的元素尺寸
  2. $('#btn').innerHeight();//取出包括内边距的元素尺寸
  3. $('#btn').outerHeight();//取出包括内边距和边框的元素尺寸
复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.js"></script>
    <title>Jquery中取元素的尺寸 height innerHeight outerHeight</title>
</head>
<style>
    *{
    margin:0px;
    padding:0px;
    }
    #pr{
    position: relative;
    height: 400px;
    width: 400px;
    background-color: aqua;
    margin-top: 300px;
    margin-left: 100px;
    }
    #box{
        height: 200px;
        width: 200px;
        background-color: antiquewhite;
        margin-left: 100px;
        margin-top: 0px;
        border: 5px red solid;
        padding: 10px;
    }

</style>
<body>
    <div id="pr">
        <div id="box">

        </div> 
    </div>


</body>
<script>
    var height = $('#box').height();
    console.log(height);
    var height = $('#box').innerHeight();
    console.log(height);
    var height = $('#box').outerHeight();
    console.log(height);
</script>
</html>

javascript核心技术(三十二)Jquery中取元素的尺寸 height innerHeight outerHeight

解释一下:
以上我们定义了一个id为pr的父元素,它的宽度是400px,高度是400px。
在父元素中定义了一个id为box的子元素,宽度为200px,高度为200px,边框为5px,内边距为10px,所以box的最终长框为200+5*2+10*2=230px。
通过height命令取出的高度为200,该尺寸不包含边框和内边距。
通过innerHeight命令取出的高度为220,该尺寸不包含边框,但包含内边距。
通过outerHeight命令取出的高度为230,该尺寸既包含边框又包含内边距。

请大家务必认真理解以上命令,否则在使用时必将乱套。

易博软件介绍

0

主题

12

帖子

6

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
6
发表于 2023-2-20 10:40:15 | 显示全部楼层
不要认为CPU运算速度快就把所有的问题都推给它去做,程序员应该将代码优化再优化,我们自己能做的决不要让CPU做,因为CPU是为用户服务的,不是为我们程序员服务的!这句话让我感触很深,我写程序也不太管代码的优化程度。
发表于 2023-3-3 20:08:51 | 显示全部楼层
我很欣赏你这么说  其实这是每个编程的人应该知道的

0

主题

6

帖子

3

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
3
发表于 2023-3-14 10:48:31 | 显示全部楼层
不错感谢楼主!

0

主题

8

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-3-24 01:22:51 | 显示全部楼层
感受很深不知同我这样的菜鸟何时才能展翅高飞哎。。。。。。。

0

主题

14

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-29 11:16:27 | 显示全部楼层
让我深有感触,我要认真学习呀

0

主题

20

帖子

11

积分

营销入门

Rank: 2

积分
11
发表于 2023-4-4 10:40:47 | 显示全部楼层
天呀,我也要成为程序设计师~

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-9 08:41:31 | 显示全部楼层
^好
发表于 2023-4-13 22:31:42 | 显示全部楼层
哎,咋就越看越心虚。。。

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-18 19:43:23 | 显示全部楼层
你的这编文章让我体味到做程序员的艰难历程  
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表