首先要明白什麼是js盒子模型???#box(有很多自己的私有的屬性) ->htmldivelement.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;
win:乙個有關於操作瀏覽器盒子模型的方法function win(attr, value)//->
"設定"
document.documentelement[attr] = value;
document.body[attr] = value;
}console.log(win("clientheight"));
win("scrolltop", 0);
如果只傳遞了attr沒有傳遞value,預設的意思是「獲取」
如果兩個引數都傳遞了,意思是「設定」
不嚴謹的來說這就是有關於」類的過載」:同乙個方法,通過傳遞引數的不同實現了不同的功能
js盒子模型中:client系列/offset系列/scrollwidth/scrollheight都是」唯讀」屬性->只能通過屬性獲取值,不能通過屬性修改元素的樣式
scrolltop/scrollleft:滾動條卷去的高度/寬度(這兩個屬性是唯一」可讀寫」屬性)
= 0;//->直接回到了容器的頂部
我們的scrolltop的值是存在邊界值(最大和最小值的),我們設定的值比最小值小或者比最大值大都沒用,起到效果的依然是邊界的值
[最小值是零]box.scrolltop = -1000
;//->直接回到了容器的頂部,沒有超出
console.log(box.scrolltop);//->0
[最大值是=真實的高度-當前容器一螢幕的高度]
var maxtop = box.scrollheight - box.clientheight
; console.log(maxtop);
秒懂JS建立物件的方式
建構函式建立物件 var obj new object obj.屬性名 屬性值 新增屬性 物件字面量 obj function createperson name,age,job return obj 建立乙個新物件,將物件返回 var obj1 createperson 張三 20 軟體工程師 v...
關於js 盒模型
1 內容就比如我們所種植的農作物所佔據的範圍。2 填充 padding 是指所種植農作物至區域邊緣之間的距離。3 邊框 border 是指每一塊土地邊緣的厚度。4 外邊距 margin 是指一塊土地與另一塊土地之間的間距。padding是盒子內部，內容與邊緣的距離 padding的作用是控制內容子元...
css和js盒模型
1.什麼是盒模型？在html頁面中，每乙個元素都可以看做是乙個盒子，而每個盒子都是由 內容區 content 填充區 padding 邊框區 border 外邊界區 margin 四部分組成的。2.盒模型的模式 盒模型分為兩種模式，分別是標準模式和怪異模式 標準模式 乙個塊的總寬度 width ma...