国产成人精品久久免费动漫-国产成人精品天堂-国产成人精品区在线观看-国产成人精品日本-a级毛片无码免费真人-a级毛片毛片免费观看久潮喷

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別

瀏覽:125日期:2023-10-05 10:51:31
一、概念

它們都是Element的屬性,表示元素的寬度:

Element.clientWidth 內(nèi)容+內(nèi)邊距-滾動條-----不包括邊框和外邊距 == 可視內(nèi)容Element.scrollWidth 內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內(nèi)容Element.offsetWidth 元素的寬度(內(nèi)容+內(nèi)邊距+邊框+滾動條)==整體,整個控件

二、舉例1、僅有橫向滾動條的情況

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>測試scrollWidth、clientWidth、offsetWidth</title> <style type='text/css'> body, html { margin: 0px; padding: 0px; } #father { width: 300px; overflow: auto; padding: 10px; background: rebeccapurple; border: 10px solid red; margin: 20px; } #child { height: 100px; width: 1000px; padding: 10px; border: 20px solid #ffcc99; margin: 30px; } </style></head><body><div id='father'> <div id='child'></div></div><script type='text/javascript'> var child = document.getElementById('child'); console.log('child.width:', window.getComputedStyle(child).width); //內(nèi)容的寬度:1000px console.log('child.clientWidth:', child.clientWidth); //內(nèi)容+內(nèi)邊距-滾動條-----不包括邊框和外邊距 == 可視內(nèi)容 1020px console.log('child.scrollWidth:', child.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內(nèi)容 1020px console.log('child.offsetWidth:', child.offsetWidth); //元素的寬度(內(nèi)容+內(nèi)邊距+邊框+滾動條)==整體,整個控件 1060px var father = document.getElementById('father'); console.log('father.width:', window.getComputedStyle(father).width); //內(nèi)容的寬度:300px console.log('father.clientWidth:', father.clientWidth); //內(nèi)容+內(nèi)邊距-滾動條-----不包括邊框和外邊距 == 可視內(nèi)容 320px console.log('father.scrollWidth:', father.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內(nèi)容 1100px console.log('father.offsetWidth:', father.offsetWidth); //元素的寬度(內(nèi)容+內(nèi)邊距+邊框+滾動條)==整體,整個控件 340px</script></body></html>

僅有橫向滾動條的情況時,父元素收受到子元素寬度的影響,其他比較特別的是scrollWidth。

父元素的scrollWidth是:子元素的content+padding+border+子元素一邊的margin+父元素一邊的padding。

2、有橫向滾動條和豎向滾動條的情況

<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>測試scrollWidth、clientWidth、offsetWidth</title> <style type='text/css'> body, html { margin: 0px; padding: 0px; } #father { height: 50px; width: 300px; overflow: auto; padding: 10px; background: rebeccapurple; border: 10px solid red; margin: 20px; } #child { height: 100px; width: 1000px; padding: 10px; border: 20px solid #ffcc99; margin: 30px; } </style></head><body><div id='father'> <div id='child'></div></div><script type='text/javascript'> var child = document.getElementById('child'); console.log('child.width:', window.getComputedStyle(child).width); //內(nèi)容的寬度:1000px console.log('child.clientWidth:', child.clientWidth); //內(nèi)容+內(nèi)邊距-滾動條-----不包括邊框和外邊距 == 可視內(nèi)容 1020px console.log('child.scrollWidth:', child.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內(nèi)容 1020px console.log('child.offsetWidth:', child.offsetWidth); //元素的寬度(內(nèi)容+內(nèi)邊距+邊框+滾動條)==整體,整個控件 1060px var father = document.getElementById('father'); console.log('father.width:', window.getComputedStyle(father).width); //內(nèi)容的寬度:285px console.log('father.clientWidth:', father.clientWidth); //內(nèi)容+內(nèi)邊距-滾動條-----不包括邊框和外邊距 == 可視內(nèi)容 305px console.log('father.scrollWidth:', father.scrollWidth); //內(nèi)容+內(nèi)邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內(nèi)容 1100px console.log('father.offsetWidth:', father.offsetWidth); //元素的寬度(內(nèi)容+內(nèi)邊距+邊框+滾動條)==整體,整個控件 340px</script></body></html>

父元素的width為:父元素的content寬度-滾動條的寬度(大約為15px)

父元素的clientWidth為:父元素的content寬度+父元素padding寬度-滾動條寬度(大約為15px)

以上就是Element中clientWidth,offsetWidth,scrollWidth的區(qū)別的詳細(xì)內(nèi)容,更多關(guān)于clientWidth,offsetWidth,scrollWidth的區(qū)別的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 欧美精品a毛片免费观看 | 一级欧美一级日韩片 | 欧美成人a级在线视频 | 午夜大片免费男女爽爽影院久久 | 91视频国产91久久久 | 免费黄网大全 | 99在线观看精品视频 | 欧美性色生活片天天看99 | 日韩中文字幕视频在线 | 国产观看在线 | a级日韩乱理伦片在线观看 a级特黄毛片免费观看 | 亚洲成人性视频 | 国产91香蕉 | 国产一区二区三区在线视频 | 日本美女性爱 | 国产在线观看精品 | 日韩一区二区三区免费视频 | 日韩一级片在线观看 | 久久国产精品夜色 | 毛片手机在线视频免费观看 | 国产成人精品男人的天堂网站 | 亚洲精品久久久久综合91 | 国产美女一区二区在线观看 | 午夜手机看片 | 成熟的女性强烈交性视频 | 香港av三级 | 亚洲欧美日韩久久精品第一区 | 看一级毛片一区二区三区免费 | 狠狠色综合久久婷婷 | 国产日韩欧美综合在线 | 国产免费久久精品99re丫y | 亚洲欧洲日本天天堂在线观看 | 精品国产夜色在线 | 精品亚洲成a人在线观看 | 日韩视频国产 | 美女在线看永久免费网址 | 狼伊千合综网中文 | 亚洲性xx| 九九视频免费精品视频免费 | 日韩中文字幕精品久久 | 黄色美女视频免费 |