色综合图-色综合图片-色综合图片二区150p-色综合图区-玖玖国产精品视频-玖玖香蕉视频

您的位置:首頁技術文章
文章詳情頁

JavaScript中clientWidth,offsetWidth,scrollWidth的區別

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

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

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

二、舉例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); //內容的寬度:1000px console.log('child.clientWidth:', child.clientWidth); //內容+內邊距-滾動條-----不包括邊框和外邊距 == 可視內容 1020px console.log('child.scrollWidth:', child.scrollWidth); //內容+內邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內容 1020px console.log('child.offsetWidth:', child.offsetWidth); //元素的寬度(內容+內邊距+邊框+滾動條)==整體,整個控件 1060px var father = document.getElementById('father'); console.log('father.width:', window.getComputedStyle(father).width); //內容的寬度:300px console.log('father.clientWidth:', father.clientWidth); //內容+內邊距-滾動條-----不包括邊框和外邊距 == 可視內容 320px console.log('father.scrollWidth:', father.scrollWidth); //內容+內邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內容 1100px console.log('father.offsetWidth:', father.offsetWidth); //元素的寬度(內容+內邊距+邊框+滾動條)==整體,整個控件 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); //內容的寬度:1000px console.log('child.clientWidth:', child.clientWidth); //內容+內邊距-滾動條-----不包括邊框和外邊距 == 可視內容 1020px console.log('child.scrollWidth:', child.scrollWidth); //內容+內邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內容 1020px console.log('child.offsetWidth:', child.offsetWidth); //元素的寬度(內容+內邊距+邊框+滾動條)==整體,整個控件 1060px var father = document.getElementById('father'); console.log('father.width:', window.getComputedStyle(father).width); //內容的寬度:285px console.log('father.clientWidth:', father.clientWidth); //內容+內邊距-滾動條-----不包括邊框和外邊距 == 可視內容 305px console.log('father.scrollWidth:', father.scrollWidth); //內容+內邊距+溢出尺寸-----不包括邊框和外邊距 ==實際內容 1100px console.log('father.offsetWidth:', father.offsetWidth); //元素的寬度(內容+內邊距+邊框+滾動條)==整體,整個控件 340px</script></body></html>

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

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

以上就是Element中clientWidth,offsetWidth,scrollWidth的區別的詳細內容,更多關于clientWidth,offsetWidth,scrollWidth的區別的資料請關注好吧啦網其它相關文章!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 女让张开腿让男人桶视频 | 无内丝袜透明在线播放 | 欧美日本一区视频免费 | 中日韩欧美一级毛片 | 成人欧美一区二区三区在线 | 美女黄色免费在线观看 | 国产一级片毛片 | 99在线观看视频免费精品9 | 日韩欧美成末人一区二区三区 | 久艹视频在线免费观看 | 国产免费一区二区三区在线观看 | 成人免费视频69 | 国产人成午夜免费噼啪视频 | 欧美成人69 | 亚洲区精品久久一区二区三区 | 日本一区午夜爱爱 | 亚洲第一视频在线播放 | 成人男女网18免费看 | 揉揉胸摸腿摸下面va视频 | 亚洲一级香蕉视频 | 怡红院亚洲红怡院天堂麻豆 | 久久狠狠色狠狠色综合 | 亚洲自拍中文 | 步兵精品手机在线观看 | 久久精品视频免费在线观看 | 在线一级片 | 国产精品正在播放 | 欧美成人观看视频在线 | 免费人成网站在线播放 | 亚洲综合成人网在线观看 | 亚洲一区二区在线视频 | 国产成人免费高清激情视频 | 一本大道香蕉大vr在线吗视频 | a级日韩乱理伦片在线观看 a级特黄毛片免费观看 | 国产舐足视频在线观看 | 狠狠色丁香婷婷久久综合考虑 | 亚洲精彩视频在线观看 | 国产欧美日韩在线 | 欧美一区二 | 理论片免费午夜 | 亚洲成a人片在线播放 |