dom尺寸
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
"./utils.js"
>
<
/script>
.box
<
/style>
<
/head>
="box"
>
<
/div>
// 以乙個方向為例，每一種都有寬和高一對
var box = document.
queryselector
('.box'
) var width =
getstyle
(box,
'width'
) console.
log(width)
// offsetwidth 得到的是數字，px幫我們去掉了
// 包含padding、border,不包含margin
var width1 = box.offsetwidth // dom提供的乙個屬性，用來獲取元素佔位尺寸，在文件流中所佔的大小
console.
log(width1)
// clientwidth就是在offsetwidth的基礎上減去border
var width2 = box.clientwidth
console.
log(width2)
// 一般都是縱向滾動條，所以以高度為例
// 獲取的是可滾動內容的總高度，如果box沒有滾動條，跟clientheight是一樣的
// 內容超出的時候獲取的總內容高度
// 不包含邊框的
var height = box.scrollheight
console.
log(height)
// 這三對屬性都只是用來獲取，不能設定
// box.offsetwidth = 400 // 這一句不會報錯，但是也不會生效
// 如果要修改元素尺寸，還是用樣式來修改，帶單位的字串
box.style.width =
'300px'
<
/script>
<
/body>
<
/html>
dom元素位置
<
!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
document<
/title>
.box
.container
<
/style>
<
/head>
="container"
>
="box"
>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
box<
/p>
<
/div>
<
/div>
var box = document.
queryselector
('.box'
)// 獲取的是元素加邊框前後的偏移量，也就是左邊框的寬度
// clienttop 就是上邊框的寬度
console.
log(box.clientleft)
// offsetparent指的是最近的有定位屬性的祖先級，如果都沒有定位，得到body
// offsetleft獲取的就是相對於offsetparent的座標
// 如果box有絕對定位的話，那麼offsetleft就和定位座標left的值一樣
console.
log(box.offsetleft)
// console.log(box.scrolltop) // 在這裡直接獲取永遠都是0
// 當滾輪開始滾動的時候來獲取
box.onscroll = function (
)// 讓滾輪預設在元素底部，可以給scrolltop賦值
// 滾動內容總高度 - 盒子本身高度可以讓滾動條在最底部
box.scrolltop = box.scrollheight - box.clientheight // 讓滾動條在最底部的公式
<
/script>
<
/body>
<
/html>
DOM元素尺寸和位置
offsetwidth和offsetheight 可以獲取元素實際大小 width padding border 可以獲取元素的大小，但是不能設定。box.offsetwidth box.offsetheight offsettop和offsetleft 可以獲取當前元素相對于父元素的位置。box....
DOM元素尺寸
offsetleft 獲取的是相對于父物件的左邊距，相當於margin left，從本元素的最外面border到父元素的最內border left 獲取或設定相對於 具有定位屬性 position定義為relative 的父物件 的左邊距 如果父div的position定義為relative,子di...
22 DOM元素尺寸和位置
1.通過 style內聯獲取元素的大小var box document.getelementbyid box 獲取元素 box.style.width 200px 空 box.style.height 200px 空ps style 獲取只能獲取到行內 style 屬性的 css 樣式中的寬和高，如...