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