前端常見寬高

2021-10-09 09:46:16 字數 3345 閱讀 2595

lang

="en"

>

>

charset

="utf-8"

/>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

/>

>

documenttitle

>

>

*html

#div1

#div2

style

>

head

>

>

"div1"

>

div>

body

>

html

>

>

let div1 = document.

queryselector

('#div1'

) div1.

addeventlistener

('click'

,(e)

=>)/*

設定相關

style

*/console.

log(

'********************瀏覽器********************'

)//瀏覽器可視區寬高

let innerwidth = window.innerwidth

let innerheight = window.innerheight

console.

log(

'瀏覽器可視區寬高:innerwidth:'

, innerwidth,

',innerheight:'

, innerheight)

console.

log(

'********************offset********************'

)//寬高+padding+border

let offsetleft = div1.offsetleft

let offsettop = div1.offsettop

console.

log(

'距離父元素左,上邊界距離'

) console.

log(

'offsetleft:'

, offsetleft,

',offsettop:'

, offsettop)

console.

log('')

//寬高+padding+border

let offsetwidth = div1.offsetwidth

let offsetheight = div1.offsetheight

console.

log(

'寬/高+padding+border'

) console.

log(

'offsetwidth:'

, offsetwidth,

',offsetheight:'

, offsetheight)

console.

log('')

console.

log(

'檢測帶有定位(absolute,relative或fixed)的父盒子節點(最近)'

) console.

log(

'offset parent:'

, div1.offsetparent)

console.

log(

'********************scroll********************'

)let scrollwidth = div1.scrollwidth

let scrollheight = div1.scrollheight

console.

log(

'寬/高+padding'

) console.

log(

'scrollwidth:'

, scrollwidth,

',scrollheight:'

, scrollheight)

console.

log('')

var scrolltop = window.pageyoffset || document.documentelement.scrolltop || document.body.scrolltop ||

0var scrollleft = window.pagexoffset || document.documentelement.scrollleft || document.body.scrollleft ||

0 console.

log(

'scroll top left:頁面被瀏覽器遮擋的頭部和左邊部分。'

) console.

log(

'scrolltop:'

, scrolltop,

',scrollleft:'

, scrollleft)

console.

log(

'********************client********************'

) console.

log(

'clientx/clienty:距離可視區左/上邊界距離 (滑鼠事件event的屬性)'

) console.

log('')

let clienttop = div1.clienttop

let clientleft = div1.clientleft

console.

log(

'元素的border'

) console.

log(

'clienttop:'

, clienttop,

',clientleft:'

, clientleft)

console.

log('')

let clientwidth = div1.clientwidth

let clientheight = div1.clientheight

console.

log(

'元素的寬/高+padding'

) console.

log(

'clientwidth:'

, clientwidth,

',clientheight:'

, clientheight)

script

>

水平垂直居中 已知寬高 未知寬高

水平 垂直居中的方法 已知寬高 未知寬高 一 居中元素 已知寬高 1 margin 根據已知的寬高寫死,不推薦 div1 div22 定位 margin top margin left.div1 div23 定位 margin.div1 div24 定位 transform 存在相容問題.div1 ...

獲取控制項高寬

一般要獲取控制項的的高寬需要控制項已經顯示或者放在onpause,ondraw等畫圖裡面 我的操作如下,也是在網上學習過來的的,希望對搭建在開發中有點幫助 int w view.measurespec.makemeasurespec 0,view.measurespec.unspecified in...

jqgrid屬性 寬,高

jqgrid屬性 width grid的寬度,如果未設定,則寬度應為所有列寬的之和 如果設定了寬度,則每列的寬度將會根據shrinktofit選項的設定,進行設定。shrinktofit 此選項用於根據width計算每列寬度的演算法。預設值為true。如果shrinktofit為true且設定了wi...