JS獲取元素屬性

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