对js,jq 下div的各种宽度高度的小结

最新推荐文章于 2022-08-07 22:34:52 发布

yidengmingmie

最新推荐文章于 2022-08-07 22:34:52 发布

阅读量389

点赞数

分类专栏： Web前端文章标签： width height

本文链接：https://blog.csdn.net/yidengmingmie/article/details/50810189

版权

Web前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<div id="box" style="width:100px;height:100px;border:1px #000 solid;margin:10px;padding:3px;
background:red;">div</div>

<script>
var s1=$('div').width()//不带单位content 100px
var s2=$('div').css('width')//带单位content 100
var s3=$('div').innerWidth()//content+padding 106
var s4=$('div').outerWidth()//
content+padding+border 108
vars5=$('div').outerWidth(true)//
content+padding+border+margin 128
var s6=document.getElementById('box').offsetWidth;
//border+padding+content 108
var s7=document.getElementById('box').offsetLeft;
//body的margin-left 8+自身的margin-left 10 = 18
var s8=document.getElementById('box').clientWidth;
//padding+content 106
var a9=document.getElementById('box').clientLeft;
//border 1
//高度是类似于宽度的，这里不再列举
</script>