Javascript 盒子模型
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title></title> <style> #div1 { height:200px; width:150px; background:blue; overflow:hidden; } </style> </head> <body> <div id= "div1" > 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 公司与企业可以从概念和形式上来区别 </div> <script type= "text/javascript" > /* 1.盒子模型1:与高,宽相关的js属性 。没有现成的直接获取内容高度的js属性(Jquery有) 。clientWidth,clientHeight:带有padding的内容宽度 。offsetHeight,offsetWidth:在clientWidth的基础上+边框的宽度 。scrollHeight,scrollWidth:实际内容的,不带下padding */ var oDiv = document.getElementById( 'div1' ); var w = oDiv.clientWidth; //内容+padding; var h = oDiv.clientHeight; //内容+上下的padding var offsetW = oDiv.offsetWidth; //在clientWidth的基础上+左右边框的宽度 var offsetH = oDiv.offsetHeight; //clientHeight+上下 边框的宽度 var contentH = oDiv.scrollHeight; //实际内容的高度,包括溢出的,包括padding;及时设置了 overflow:hidden;也不受影响 如果没有溢出,和clientHeight相同,如果有溢出,只包括上padding,不包括下padding //js中没有现成的属性:(1)直接得到盒子的实际内容的宽度(width,height) (2)也没有margin </script> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步