#JS盒模型
指的是透過JS中提供的一系列的屬性與方法,取得頁面中元素的樣式資訊值#box(有很多自己的私有的屬性) ->HTMLpElement.prototype ->HTMLElement.prototype - >Element.prototype ->Node.prototype ->EventTarget.prototype ->Object.prototype
var box = document.getElementById(“box”);
console.dir(box);
內容的寬度和高度:我們設定的width/height這兩個樣式就是內容的寬和高;如果沒有設定height值,容器的高度會根據裡面內容自己進行適應,這樣取得的值就是真實內容的高;如果設定固定的高度了,不管內容是多了還是少了,其實我們內容的高度指的都是設定的那個值;
#真實內容的寬度和高度:這個代指的是實際內容個的寬高(和我們設定的height沒有必然的聯繫),例如:我設定高度為200px,如果內容有溢出,那麼真實內容的高度是要把溢出內容的高度也要加進來的
1、client系列(当前元素的几个私有的属性) clientWidth/clientHeight:内容的宽度/高度+左右/上下填充 (和内容溢出没有关系) clientLeft:左边框的宽度 clientTop:上边框的高度 (border[Left/Top]Width) 2、offset系列 offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框 (和内容是否溢出也是没有任何的关系的) offsetParent:当前元素的父级参照物 offsetLeft/offsetTop:当前元素的外边框距离父级参照物的内边框的偏移量 3、scroll系列 scrollWidth/scrollHeight:和我们的clientWidth/clientHeight一模一样(前提是:容器中的内容没有溢出的情况下) 如果容器中的内容有溢出,我们获取的结果是如下规则: scrollWidth:真实内容的宽度(包含溢出)+左填充 scrollHeight:真实内容的高度(包含溢出)+上填充 获取到的结果都是"约等于"的值,因为:同一个浏览器,我们是否设置overflow='hidden'对于最终的结果是有影响的;在不同的浏览器中我们获取到的结果也是不相同的; scrollLeft/scrollTop:滚动条卷去的宽度/高度 2、关于JS盒子模型属性取值的问题 我们通过这13个属性值获取的结果永远不可能出现小数,都是整数;浏览器获取结果的时候,在原来真实结果的基础上进行四舍五入; 3、关于操作浏览器本身的盒子模型信息 clientWidth/clientHeight是当前浏览器可视窗口的宽度和高度(一屏幕的宽度和高度) scrollWidth/scrollHeight是当前页面的真实宽度和高度(所有屏加起来的宽度和高度~但是是一个约等于的值 我们不管哪些属性,也不管是什么浏览器,也不管是获取还是设置,想要都兼容的话,需要写两套 document.documentElement[attr]||document.body[attr]; //->必须document.documentElement在前 例如: [获取] document.documentElement.clientWidth||document.body.clientWidth [设置也需要写两套] document.documentElement.scrollTop=0; document.body.scrollTop=0;
function win(attr, value) { if (typeof value === "undefined") {//->没有传递value值->"获取" return document.documentElement[attr] || document.body[attr]; } //->"设置" document.documentElement[attr] = value; document.body[attr] = value; } console.log(win("clientHeight")); win("scrollTop", 0);
win:一個有關於操作瀏覽器盒子模型的方法
如果只傳遞了attr沒有傳遞value,預設的意思是「取得」
如果兩個參數都傳遞了,意思是「設定」
不嚴謹的來說這就是有關於”類的重載”:同一個方法,通過傳遞參數的不同實現了不同的功能
JS盒子模型中:client系列/offset系列/scrollWidth/scrollHeight都是”只讀”屬性->只能透過屬性取得值,不能透過屬性修改元素的樣式
scrollTop/scrollLeft:滾動條卷去的高度/寬度(這兩個屬性是唯一”可讀寫”屬性)
//box.scrollTop = 0;//->直接回到了容器的頂部
我們的scrollTop的值是存在邊界值(最大和最小值的),我們設定的值比最小值小或比最大值大都沒用,起到效果的依然是邊界的值
[最小值是零] box.scrollTop = -1000;//->直接回到了容器的顶部,没有超出 console.log(box.scrollTop);//->0 [最大值是=真实的高度-当前容器一屏幕的高度] var maxTop = box.scrollHeight - box.clientHeight; console.log(maxTop);
相關文章:
CSS3中的盒子模型與盒子模型屬性box-sizing的詳細介紹##相關影片:
盒模型-布爾教育_燕十八_HTML影片教學以上是瞬間懂了,淺析對JS中的盒子模型認識與理解的詳細內容。更多資訊請關注PHP中文網其他相關文章!