CSS獲取高度的方法主要有兩種,一種是通過CSS中的height屬性獲取高度,另一種是通過JavaScript獲取元素的實(shí)際高度。
/* 通過CSS的height屬性獲取元素高度 */ .element { height: 100px; background-color: red; } /* 使用JavaScript獲取元素的實(shí)際高度 */ var element = document.getElementById('element'); var height = element.offsetHeight; console.log(height);
CSS的height屬性適用于靜態(tài)頁面中元素高度不變的情況,對于動態(tài)頁面中高度可能發(fā)生變化的元素就需要使用JavaScript獲取元素的實(shí)際高度。JavaScript中常用的獲取實(shí)際高度的方法有offsetHeight和clientHeight。
/* 獲取元素包括border、padding和實(shí)際高度的總高度 */ var height = element.offsetHeight; /* 獲取元素的實(shí)際高度,不包括border和padding */ var height = element.clientHeight;
需要注意的是,offsetHeight和clientHeight獲取的高度值都是整數(shù),且不包括CSS中設(shè)置的border和padding值。如果需要獲取完整的高度值,要將border和padding值加上去。