JavaScript——获取容器高度

第一种情况

　　只能获取元素标签style属性里的值

<div id="testDiv" style="height:300px"></div>
                                    .
                                    .
                                    .
                                    .
                                    .
                                    .
// 获取数据
const div = document.getElementById("testDiv");
console.log(div.style.height);//300px

　　

第二种情况

　　因为style属性值没有，所以按照第一种方式获取得到的值为空


　　getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的都显示出来）；这和style属性只能获取内联样式的行为形成了鲜明的对比。除此之外，getComputedStyle是只读的，但是style能文能武，可读可写，我们也可以利用它动态设置元素的高度。

　　getPropertyValue方法可以获取CSS样式申明对象上的属性值，比如：height属性值

<div id="testDiv"></div>
                                    .
                                    .
                                    .
#testDiv{
    height：300px
}
                                    .
                                    .
                                    .
// 获取数据
const div = document.getElementById("testDiv");
console.log(div.style.height);// ' '        //打印空值
console.log(window.getComputedStyle(div).getPropertyValue('height'));// 300px