美文网首页
关于高度的获取出现的问题

关于高度的获取出现的问题

作者: newway_001 | 来源:发表于2019-03-05 19:43 被阅读0次

不管是不是box-sizing:border-box;
jquery获取的高度、宽度都是content的高度宽度;

举例:

<style>
p{
height:40px;
padding:10px 10px;
width:250px;
box-sizing:border-box;

border:1px solid black;
}
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("span").text($("p").width());
  });
});
</script>
</head>
<body>
<p>本段落的高度是 <span>228</span> px。</p>
<button class="btn1">获得高度</button>
</body>
</html>

拓展:

1:width()、height()获取的是content宽度、高度
2:innerWidth()、innerHeight()获取的是padding+content;
3:outerWidth()、outerHeight()获取的是border+padding+content;
4:outerWidth(true)、outerHeight(true)获取的是margin+border+padding+content;

相关文章

网友评论

      本文标题:关于高度的获取出现的问题

      本文链接:https://www.haomeiwen.com/subject/vwtauqtx.html