JS获取元素属性

Posted 2020-09-03 九转功成

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