元素尺寸 height() width() innerHeight( innerWidth() outerHeight(false/true): height+padding+border 如果是true, 加上margin outerWidth(false/true): width+padding+border 如果是true, 加上margin

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>元素尺寸</title>
</head>
<style>
  div {
    width: 100px;
    height: 150px;
    background: red;
    padding: 20px;
    border: 20px #fbd850 solid;
    margin: 10px;
  }
</style>
</head>

<body>
<div>div</div>

<!--
1. 内容尺寸  与css中设置的相应属性值相同
  height(): height
  width(): width
2. 内部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>
  $(function () {
      var $div = $('div');
    console.log($div.width(),$div.height());
    console.log($div.innerWidth(),$div.innerHeight());
    console.log($div.outerWidth(),$div.outerHeight());
    console.log($div.outerWidth(true),$div.outerHeight(true));
    console.log($div.css('width'))
  })
</script>
</body>

</html>
posted @ 2020-08-09 09:40  13522679763-任国强  阅读(79)  评论(0)    收藏  举报