<style> *{ box-sizing: border-box; } html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; } .main{ width: 600px; height: 300px; margin: 0 auto; background: #999; } #p1{ padding: 10px 20px; } </style>
<div class="main" id=main> 东方红 的事发后 沙发上好厉害多个从V型从一瓶酒发送到发送到 <p id=p1>sdfldsnfdsnldfsn fnsdfsdlknfsdflndslfsdn</p> </div>
<script> /** * JS获取 dom样式的几种情况 * 一:获取元素的行内样式 * 二:获取计算后的样式 * 三:获取<link>和<style>标签写入的样式 * 四、获取元素的实际大小 1. clientWidth和clientHeight 这组属性可以获取元素可视区的大小, 可以得到元素内容及内边距所占据的空间大小。 返回了元素大小,但没有单位,默认单位是px,如果你强行设置了单位, 比如100em之类,它还是会返回px的大小。(CSS获取的话,是照着你设置的样式获取)。 对于元素的实际大小,clientWidth和clientHeight理解方式如下: a. 增加边框,无变化; b. 增加外边距,无变化; c. 增加滚动条,最终值等于原本大小减去滚动条的大小; d. 增加内边距,最终值等于原本大小加上内边距的大小; ##注意:当box-sizing属性值是border-box的时候上述abcd不成立 * */ //1 定义获取dom的函数 function getDom(str){ return document.querySelector(str); } //2 、定义获取 function getStyle(dom){ var style=null; window.getComputedStyle?style=window.getComputedStyle(dom):style=dom.currentStyle; return style; } var dom1=getDom(‘#main‘); console.log(dom1.clientWidth);// 得到的是没带px的数字 var domstyle=getStyle(dom1);// 字符创的宽度带px 和上面的clientWidth实质上是一样的 console.log(domstyle.width); //p 的宽度 var dom2=getDom(‘#p1‘); console.log(dom2.clientWidth); console.log(getStyle(dom2).width); </script>
时间: 2024-11-10 01:02:52