<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>