HTMLElement.getBoundingClientRect
Element.getBoundingClientRect()
返回值是一個(gè)DOMRect對象，是包含整個(gè)元素的最小矩形（包括 padding 和 border-width）。該對象使用left、top、right、bottom、x、y、width 和 height這幾個(gè)以像素為單位的只讀屬性描述整個(gè)矩形的位置和大小。除了 width 和 height 以外的屬性是相對于視圖窗口的左上角來計(jì)算的。
該方法返回的 DOMRect 對象中的 width 和 height 屬性是包含了 padding 和 border-width 的，而不僅僅是內(nèi)容部分的寬度和高度。
在標(biāo)準(zhǔn)盒子模型中，這兩個(gè)屬性值分別與元素的 width/height + padding + border-width 相等。
而如果是 box-sizing: border-box，兩個(gè)屬性則直接與元素的 width 或 height 相等。
通過getBoundingClientRect獲取的屬性值是不計(jì)算滾動(dòng)偏移量的，是相對瀏覽器可視區(qū)域而言的。
.box {
background-color: palevioletred;
height: 200px;
width: 200px;
}
.box {
background-color: palevioletred;
height: 200px;
width: 200px;
padding: 20px;
border: 10px solid green;
}
.box {
background-color: palevioletred;
height: 200px;
width: 200px;
margin: 30px;
}
<div className="App">
<div className='state_box'></div>
<div className='parent_box' id='parent_box'>
<div className='box' id='box'>
</div>
</div>
</div>
.state_box {
height: 200px;
background-color: aquamarine;
}
.parent_box {
height: 600px;
width: 600px;
background-color: olivedrab;
margin-left: 100px;
padding: 30px 50px;
}
.box {
height: 200px;
width: 200px;
background-color: palevioletred;
}
const boxDom = document.getElementById('box')
console.log('boxDom',boxDom?.getBoundingClientRect());
box增加padding，border,margin后
.state_box {
height: 200px;
background-color: aquamarine;
}
.parent_box {
height: 600px;
width: 600px;
background-color: olivedrab;
margin-left: 100px;
padding: 30px 50px;
}
.box {
height: 200px;
width: 200px;
background-color: palevioletred;
border: 10px solid orange;
padding: 10px 20px;
margin: 10px 20px;
}
const boxDom = document.getElementById('box')
console.log('boxDom',boxDom?.getBoundingClientRect());
console.log('getClientRects',boxDom?.getClientRects() );
HTMLElement.clientWidth
只讀屬性 Element.clientWidth 對于內(nèi)聯(lián)元素以及沒有 CSS 樣式的元素為 0；否則，它是元素內(nèi)部的寬度（以像素為單位）。該屬性包括內(nèi)邊距（padding），但不包括邊框（border）、外邊距（margin）和垂直滾動(dòng)條（如果存在）。
該屬性值會(huì)被四舍五入為一個(gè)整數(shù)。如果你需要一個(gè)小數(shù)值，可使用 element.getBoundingClientRect()。
<div className="App">
<div className='state_box'></div>
<div className='parent_box' id='parent_box'>
<div className='box' id='box'>
</div>
</div>
</div>
.state_box {
height: 200px;
background-color: aquamarine;
}
.parent_box {
height: 600px;
width: 600px;
background-color: olivedrab;
margin-left: 100px;
padding: 30px 50px;
}
.box {
height: 200px;
width: 200px;
background-color: palevioletred;
border: 10px solid orange;
padding: 10px 20px;
margin: 10px 20px;
}
const boxDom = document.getElementById('box')
console.log('clientWidth',boxDom?.clientWidth);
console.log('clientHeight',boxDom?.clientHeight);
console.log('clientLeft',boxDom?.clientLeft);
console.log('clientTop',boxDom?.clientTop);
clientLeft: element左邊框的寬度即border-left
clientTop: element上邊框的寬度即border-top
修改border測試
.box {
height: 200px;
width: 200px;
background-color: palevioletred;
border-top: 30px solid orange;
border-bottom: 30px solid orange;
border-left: 20px solid orange;
border-right: 20px solid orange;
padding: 10px 20px;
margin: 10px 20px;
}
當(dāng)box改為box-sizing: border-box;
.box {
height: 200px;
width: 200px;
background-color: palevioletred;
border-top: 30px solid orange;
border-bottom: 30px solid orange;
border-left: 20px solid orange;
border-right: 20px solid orange;
padding: 10px 20px;
margin: 10px 20px;
box-sizing: border-box;
}
HTMLElement.offsetWidth
HTMLElement.offsetWidth
HTMLElement.offsetWidth 是一個(gè)只讀屬性，返回一個(gè)元素的布局寬度。一個(gè)典型的offsetWidth 是測量包含元素的邊框 (border)、水平線上的內(nèi)邊距 (padding)、豎直方向滾動(dòng)條 (scrollbar)（如果存在的話）、以及 CSS 設(shè)置的寬度 (width) 的值。
查詢：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetWidth
const computeItem = (text, last, paddingRight = 10) => {
let width = 0;
const span = document.createElement('span');
span.innerText = text;
if (!last) {
// 非最后一個(gè)元素,padding-right設(shè)置10px
span.style.paddingRight = `${paddingRight}px`;
}
span.className = 'getTextWidth';
document.querySelector('body')?.appendChild(span);
span.style.display = 'inline-block';
width = document.querySelector('.getTextWidth')?.offsetWidth;
// 移除元素
document.querySelector('.getTextWidth')?.remove();
console.log('text-width', width);
return width;
};
HTMLElement.offsetLeft
HTMLElement.offsetLeft 是一個(gè)只讀屬性，返回當(dāng)前元素左上角相對于 HTMLElement.offsetParent 節(jié)點(diǎn)的左邊界偏移的像素值。
HTMLElement.offsetTop
TMLElement.offsetTop 為只讀屬性，它返回當(dāng)前元素相對于其 offsetParent 元素的頂部內(nèi)邊距的距離。
HTMLElement.offsetParent
HTMLElement.offsetParent 是一個(gè)只讀屬性，返回一個(gè)指向最近的（指包含層級(jí)上的最近）包含該元素的定位元素或者最近的 table, td, th, body 元素。當(dāng)元素的 style.display 設(shè)置為 “none” 時(shí)，offsetParent 返回 null。
const dom = document.querySelector('.box');
console.log('offsetParent', dom?.offsetParent);
console.log('offsetLeft', dom?.offsetLeft);//offsetLeft 60
offsetdemo
scrollTop
判斷元素是否滾動(dòng)到底
scrollTop是一個(gè)非整數(shù)，而scrollHeight和clientHeight是四舍五入的，因此確定滾動(dòng)區(qū)域是否滾動(dòng)到底的唯一方法是查看滾動(dòng)量是否足夠接近某個(gè)閾值：Math.abs(element.scrollHeight - element.clientHeight - element.scrollTop) < 1
scrollWidth
Element.scrollWidth 這個(gè)只讀屬性是元素內(nèi)容寬度的一種度量，包括由于 overflow 溢出而在屏幕上不可見的內(nèi)容。
scrollWidth值等于元素在不使用水平滾動(dòng)條的情況下適合視口中的所有內(nèi)容所需的最小寬度。寬度的測量方式與clientWidth相同：它包含元素的內(nèi)邊距，但不包括邊框，外邊距或垂直滾動(dòng)條（如果存在）。它還可以包括偽元素的寬度，例如::before或::after。如果元素的內(nèi)容可以適合而不需要水平滾動(dòng)條，則其scrollWidth等于clientWidth
.state_box {
height: 200px;
background-color: aquamarine;
}
.parent_box {
height: 600px;
width: 600px;
background-color: olivedrab;
margin-left: 100px;
padding: 30px 50px;
overflow: auto;
}
.box {
height: 200px;
width: 1000px;
background-color: palevioletred;
border-top: 30px solid orange;
border-bottom: 30px solid orange;
border-left: 20px solid orange;
border-right: 20px solid orange;
padding: 10px 20px;
margin: 10px 20px;
}
const boxDom = document.getElementById('box')
console.log('clientWidth',boxDom?.clientWidth);
console.log('clientHeight',boxDom?.clientHeight);
console.log('scrollWidth',boxDom?.scrollWidth);
console.log('scrollHeight',boxDom?.scrollHeight);
console.log('scrollLeft',boxDom?.scrollLeft);
console.log('offsetTop',boxDom?.scrollTop);
父元素會(huì)出現(xiàn)滾動(dòng)條
useEffect(() => {
const boxDom = document.getElementById('box')
console.log('clientWidth', boxDom?.clientWidth);
console.log('clientHeight', boxDom?.clientHeight);
console.log('scrollWidth', boxDom?.scrollWidth);
console.log('scrollHeight', boxDom?.scrollHeight);
console.log('scrollLeft', boxDom?.scrollLeft);
console.log('offsetTop', boxDom?.scrollTop);
// 監(jiān)聽滾動(dòng)事件
window.addEventListener('scroll', (e) => {
console.log('e',e);
console.log('------------------');
const boxDom = document.getElementById('parent_box')
console.log('clientWidth', boxDom?.clientWidth);
console.log('clientHeight', boxDom?.clientHeight);
console.log('scrollWidth', boxDom?.scrollWidth);
console.log('scrollHeight', boxDom?.scrollHeight);
console.log('scrollLeft', boxDom?.scrollLeft);
console.log('offsetTop', boxDom?.scrollTop);
console.log('------------------');
}, true)
}, [])
事件鼠標(biāo)pageX,pageY,clientX,clientY,screenY,screenX
電腦屏幕左上角 screenX：鼠標(biāo)點(diǎn)擊位置相對于電腦屏幕左上角的水平偏移量 screenY：鼠標(biāo)點(diǎn)擊位置相對于電腦屏幕左上角的垂直偏移量
e.screenX
瀏覽器內(nèi)容區(qū)域左上角 clientX：鼠標(biāo)點(diǎn)擊位置相對于瀏覽器可視區(qū)域的水平偏移量（不會(huì)計(jì)算水平滾動(dòng)的距離） clientY：鼠標(biāo)點(diǎn)擊位置相對于瀏覽器可視區(qū)域的垂直偏移量（不會(huì)計(jì)算垂直滾動(dòng)條的距離）
e.clientX
網(wǎng)頁的左上角 pageX：鼠標(biāo)點(diǎn)擊位置相對于網(wǎng)頁左上角的水平偏移量，也就是clientX加上水平滾動(dòng)條的距離 pageY：鼠標(biāo)點(diǎn)擊位置相對于網(wǎng)頁左上角的垂直平偏移量，也就是clientY加上垂直滾動(dòng)條的距離
e.pageX
offsetX：鼠標(biāo)點(diǎn)擊位置相對于觸發(fā)事件對象的水平距離 offsetY：鼠標(biāo)點(diǎn)擊位置相對于觸發(fā)事件對象的垂直距離
e.nativeEvent.offsetX
<div className="box" onClick={(e) => {
console.log('e', e);
}}
>
hello
</div>
e.nativeEvent.layerX
e.nativeEvent.layerY
HTMLElement.outerText
HTMLElement.outerText是一個(gè)非標(biāo)準(zhǔn)的屬性。作為一個(gè)獲得器，它返回與HTMLElement.innerText一致的值。
demo
一個(gè)box，分為左側(cè)和右側(cè)。
- 左側(cè)標(biāo)簽長度和右側(cè)標(biāo)簽長度總值小于box長度，全部顯示
- 左側(cè)標(biāo)簽長度+右側(cè)標(biāo)簽長度 大于 box長度
- 當(dāng)左側(cè)大于總長度一半時(shí)，左側(cè)超出長度顯示…
const leftList = ['hello world', 'this is pencil', '大熊貓', '平攤TER', 'this is pencil', '大熊貓', '平攤TER', 'this is pencil', '大熊貓', '平攤TER'];
const rightList = ['陽光 沙灘', 'this is pencil', '大熊貓'];
- 當(dāng)右側(cè)大于總長度一半時(shí)，右側(cè)超出顯示長度顯示…
const leftList = ['hello world', 'this is pencil', '大熊貓', '平攤TER'];
const rightList = ['陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER', '陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER'];
- 當(dāng)兩者都超出總長度一半時(shí)，左側(cè)和右側(cè)分別顯示…
const leftList = ['hello world', 'this is pencil', '大熊貓', '平攤TER', 'this is pencil', '大熊貓', '平攤TER'];
const rightList = ['陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER', '陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER'];
計(jì)算一個(gè)dom元素的長度demo
const leftList = ['hello world', 'this is pencil', '大熊貓', '平攤TER'];
const rightList = ['陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER', '陽光 沙灘', 'this is pencil', '大熊貓', '平攤TER'];
const leftRef = useRef(null);
const rightRef = useRef(null);
const [leftWidth, setLeftWidth] = useState<number | undefined>(undefined);
const [rightWidth, setRightWidth] = useState<number | undefined>(undefined);
useEffect(() => {
console.log('leftRef', leftRef);
console.log('leftRef', leftRef?.current?.clientWidth);
console.log('rightRef', rightRef);
console.log('rightRef', rightRef?.current?.clientWidth);
// 20代表右側(cè)margin-right， 59代碼標(biāo)題width
// eslint-disable-next-line max-len
const leftBoxWidth = leftList?.reduce((sum, text, i, arr) => sum + computeItem(text, i === arr?.length - 1), 0) + 20 + 58;
// eslint-disable-next-line max-len
const rightBoxWidth = rightList?.reduce((sum, text, i, arr) => sum + computeItem(text, i === arr?.length - 1), 0) + 20 + 58;
console.log('leftBoxWidth', leftBoxWidth);
console.log('leftBoxWidth', rightBoxWidth);
// 給左右盒子設(shè)置 width
// 當(dāng)兩者之和超出box寬度時(shí)，需要設(shè)置width進(jìn)行...隱藏
if (leftBoxWidth + rightBoxWidth > 800) {
if (leftBoxWidth >= 400 && rightBoxWidth >= 400) {
setLeftWidth(400);
setRightWidth(400);
}
if (leftBoxWidth > 400 && rightBoxWidth < 400) {
setLeftWidth(800 - rightBoxWidth);
setRightWidth(rightBoxWidth);
}
if (leftBoxWidth < 400 && rightBoxWidth > 400) {
setLeftWidth(leftBoxWidth);
setRightWidth(800 - leftBoxWidth);
}
} else {
setLeftWidth(undefined);
setRightWidth(undefined);
}
}, []);
<div className="box">
<div className="left-box" ref={leftRef} style={{ width: leftWidth }}>
<span className="title">左側(cè)信息</span>
{
leftList?.map((v, i) => (
<span key={i} className="item">{v}</span>
))
}
</div>
<div className="right-box" ref={rightRef} style={{ width: rightWidth }}>
<span className="title">右側(cè)信息</span>
{
rightList?.map((v, i) => (
<span className="item" key={i}>{v}</span>
))
}
</div>
</div>
.box {
margin-top: 40px;
width: 800px;
border: 1px solid #888;
display: flex;
.title {
padding-right: 10px;
}
.left-box {
margin-right: 20px;
padding-bottom: 10px;
padding-top: 10px;
// 超出不換行
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
box-sizing: border-box;
.item {
margin-right: 10px;
background-color: #e7e7e7;
padding-top: 4px;
padding-bottom: 4px;
&:last-child {
margin-right: 0px;
}
}
}
.right-box {
box-sizing: border-box;
padding-bottom: 10px;
padding-top: 10px;
margin-right: 20px;
// 超出不換行
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.item {
margin-right: 10px;
background-color: #e7e7e7;
padding-top: 4px;
padding-bottom: 4px;
&:last-child {
margin-right: 0px;
}
}
}
}
window.devicePixelRatio = 1 //屏幕分辨率1920，瀏覽器縮放比例100%
window.devicePixelRatio = 1.5 //屏幕分辨率1920，瀏覽器縮放比例150%
window.devicePixelRatio由筆記本電腦屏幕的縮放設(shè)置決定的
- 像素 屏幕中最小的色塊，每個(gè)色塊稱之為一個(gè)像素（Pixel）
- 分辨率 分辨率=屏幕水平方向的像素點(diǎn)數(shù) * 屏幕垂直方向的像素點(diǎn)數(shù);
window.devicePixelRatio = 顯示設(shè)備CSS像素分辨率 / 顯示設(shè)備物理像素分辨率
?
顯示設(shè)備寬度物理像素值= window.screen.width * window.devicePixelRatio;
react監(jiān)聽scroll事件無效文章來源：http://www.zghlxwxcb.cn/news/detail-762115.html
useEffect(() => {
// 監(jiān)聽滾動(dòng)事件
window.addEventListener('scroll', (e) => {
console.log('e',e);
})
}, []) ```
解決是addEventListener事件添加第3個(gè)參數(shù)設(shè)置true即可
```js
useEffect(() => {
// 監(jiān)聽滾動(dòng)事件
window.addEventListener('scroll', (e) => {
console.log('e',e);
}, true)
}, [])
?。?！部分
圖源網(wǎng)絡(luò)文章來源地址http://www.zghlxwxcb.cn/news/detail-762115.html
到了這里，關(guān)于筆記：dom元素各種寬度和高度，getBoundingClientRect，clientWidth,clientHeight,offsetWidth,offsetHeight的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
