js之盒子模型的詳解

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

1、client系列(當前元素的幾個私有的屬性)

　　

內容的寬度和高度:我們設定的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中文網其他相關文章！