1.js盒子模型
指的是透過js中提供的一系列的屬性和方法，取得頁面中元素的樣式資訊值
範例：
##box有很多自己的私有屬性：
<strong>HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype<br/>var box = document.getElementById("box");<br/>console.dir(box);</strong>一提到盒子模型，大家首先會想到的是css的盒子模型，那麼JS盒子模型指的是透過JS中提供的一系列的屬性和方法，取得頁面中的元素的樣式資訊值。
對於一個#div(有很多自己的私有的屬性) -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node .prototype->EventTarget.prototype->Object.prototype
以下是一些JS方法
以下是一些JS方法
內容的寬度和高度:我們設定的width/height這兩個樣式就是內容的寬和高，如果沒有設定height值，容器的高度會根據裡面的內容自己進行適應，這樣獲得的值就是真實內容的高；如果設定固定了高度了，不管內容是多了還是少了，其實我們內容的高度指的都是設定的那個值。
真實內容的寬度和高度:這個代指的是實際內容的寬高（和我們設定的height沒有必然的聯繫），例如我設置高度為200px，如果內容有溢出，那麼真實內容的高度就是要把溢出的內容高度加進來的
clientWidth/clientHeight 內容的寬度/高度+ 左右/上下 填充（和內容溢出沒有關係） clientLeft:
左邊框的寬度clientTop:上邊框的高度（border[Left/Top]Width）
2、offset系列# offsetWidth/offsetHeight ：
clientWidth/clientHeight+左右/上下邊框（和內容是否溢出也是沒有任何的關係的）# offsetParent
:目前元素的父級參考物offsetLeft/offsetTop
：目前元素的外邊框距離父級參照物的內邊框的偏移量# 3、scroll系列
## scrollWidth/scrollHeight:和我們的clientWidth/clientHeight一模一樣（前提是:容器中的內容沒有溢出的情況下） 如果容器中的內容有溢出，我們取得的結果如下規則
#scrollWidth：真實內容的寬度（包含溢位）+左填# scrollHeigh：
#真實內容的高度（包含溢位）+上填入
所獲得的結果都是約等於的值，因為：同一個瀏覽器，我們是否設定overflow=“hidden”對於最終的結果是有影響的；在不同的瀏覽器下取到的結果也是不同的。
scrollLeft/scrollTop:滾動條卷去的寬度和高度
#########################################################################################################################################################################################################################################' ############二、關於JS盒子模型屬性取值的問題########################
我们通过这13个属性值获取到的结果永远不可能出现小数，都是整数，浏览器在获取结果的时候，还在原来真是结果的基础上进行四舍五入；
三、关于操作浏览器本身的盒子模型信息
clientWidth/clientHeight 是当前浏览器可视窗口的宽度和高度（一屏幕的宽度和高度）
scrollWidth/scrollHeight 是当前页面的真实的宽度和高度（所有屏加起来的宽度和高度~但是是一个约等于的值）
我们不管哪些属性，也不管是什么浏览器，也不管是获取还是设置，想要都兼容的话，需要写两套
document.documentElement[attr] || document.body[attr];
必须document.documentElement在前
例如document.documentElement.clientWidth || document.body.clientWidth
设置也需要写两套
编写一个有关于操作浏览器盒子模型的方法 ，代码如下
//如果只传递了attr没有传递value，默认的意思是获取样式值。如果都传递了，意思是设置//不严谨的来说这就是有关于“类的重载”:同一个方法，通过传递的参数的不同实现了不同的功能function win(attr,value){if(typeof value === "undefined"){//属于获取操作return document.documentElement[attr] || document.body[attr];
}//设置document.documentElement[attr] = value;
document.body[attr] = value
}
以上是js之盒子模型的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
