티스토리 뷰
요약
| Element 속성 | 차이 | 설명 |
| clientHeight | 보이는 것 | 안쪽 높이(content height) + padding - scrollbar *<html>, <body>에 사용되면 뷰포트의 높이 (스크롤바 제외)가 반환된다. |
| offsetHeight | 보이는 것 | 안쪽 높이(content height + scrollbar) + padding + border |
| scrollHeight | 안보이는 것 | overflow로 가려진 부분을 포함하는 컨텐츠 전체의 높이 (margin과 padding은 값에 영향을 주지만, border는 영향을 주지 않는다.) |
*scrollbar의 값은 padding-bottom에 포함 돼 있다.
*<html>, <body>의 뷰포트 높이에 스크롤값이 포함된 것은 window.innerHeight이다.
<!DOCTYPE html>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>clientHeight, offsetHeight, scrollHeight의 차이</title>
<style>
html {
background: #333;
}
.para {
width: 60vw;
margin: 4rem auto;
color: #fff
}
.overflow {
overflow: scroll;
height: 400px;
padding: 1rem;
border: solid pink;
border-width: 2px 4px 6px 8px;
color: #333;
background: #ddd;
box-sizing: border-box;
}
</style>
</head>
<body>
<p class="para item1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<p class="para item2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<p class="para item3 overflow">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus totam iusto sequi! Porro natus sequi atque sit sint quis molestias fugit dicta perferendis. Alias ratione labore aspernatur? Expedita dolore ad harum molestiae est, officia rem quia maiores quisquam quos facere quaerat ab aperiam saepe accusantium impedit perferendis, velit modi. Magnam rem non nostrum hic nesciunt accusamus sint nulla quibusdam, itaque, obcaecati, fugiat harum modi! Earum sed quidem illo laborum culpa obcaecati nesciunt. Minus molestias vitae enim, error nobis sed ab labore dignissimos veniam, cumque mollitia, animi maiores velit perspiciatis consectetur maxime veritatis ea distinctio eius voluptatum repellendus. Laborum commodi at similique beatae suscipit non deleniti dolores dignissimos maiores, amet dolorum, nihil porro cupiditate consectetur perspiciatis facilis et aliquid magni temporibus hic? Sequi quidem necessitatibus eos, corporis quae reprehenderit laboriosam, pariatur, repellat veniam soluta quos magni maiores modi ullam harum perspiciatis sunt aperiam fugiat non in voluptatem numquam. Nobis distinctio alias asperiores doloribus sint labore ab excepturi suscipit deleniti voluptates aspernatur quo velit unde earum aliquam necessitatibus autem sit quam hic sequi, nemo iusto. Veritatis totam, magnam tempore eum laudantium eius modi ut illo aperiam sint officiis voluptatibus distinctio quos possimus, optio corrupti architecto, debitis in animi? Expedita, eos, similique pariatur aspernatur placeat consectetur aperiam at beatae dolore assumenda molestias recusandae fugit dolor vel id rem et, perspiciatis reprehenderit! Ipsa dicta quidem dignissimos quas nam atque ipsum! Voluptatibus sunt quo tempora numquam! Esse ipsa nesciunt itaque similique, ducimus, ab aliquid sit maiores eveniet aspernatur magnam culpa, expedita odio. Totam sint accusantium ex modi optio laboriosam quibusdam, fuga, assumenda harum nesciunt aliquid distinctio unde corporis. Quia ullam velit quidem, esse, labore omnis, pariatur nam alias impedit illo iste commodi placeat eum sapiente maiores nulla corporis consequatur ad ipsum. Repellendus, placeat sed, doloremque qui voluptatibus minima maiores aut quod quidem dolor nam impedit magni aspernatur voluptates non culpa cumque. Sed corrupti numquam commodi iure nihil deleniti magnam, in quia cumque aliquid eaque illum minima dignissimos ipsum obcaecati, maxime illo molestiae ut natus reiciendis facere! Laudantium magnam nemo, ex, quae iste eligendi velit fugit nostrum eum accusamus veniam omnis natus eveniet earum nihil optio odit. Fuga, dolor iste dolorum necessitatibus sint possimus temporibus officiis perferendis error commodi debitis quas! Soluta vitae reprehenderit distinctio tempora iusto quos fugit tempore perspiciatis pariatur culpa porro odit ut laboriosam minima sequi asperiores odio sapiente ratione architecto deserunt similique, a vero quia cumque? Vero sit modi ipsam, nostrum commodi pariatur, esse amet veniam molestiae eos magnam nisi reprehenderit non qui obcaecati minima quas accusamus? Odio rem veritatis, mollitia fugit qui perspiciatis aliquam molestiae recusandae, ipsam dolorem ducimus earum totam excepturi consectetur atque voluptate inventore nemo assumenda soluta accusantium fugiat. Adipisci enim quis quasi hic at. Totam suscipit nesciunt, quam dolorum dolores officia praesentium dolore impedit esse inventore vel reprehenderit optio asperiores id voluptas, dignissimos fuga. Maiores distinctio unde, commodi asperiores a quam maxime quasi perferendis! Laborum, magnam ex. Ea minus cum repudiandae magni necessitatibus nam possimus ipsam, laudantium atque amet nisi. Quas ratione esse soluta temporibus porro. Facilis, illo. Accusamus nostrum quaerat modi tenetur voluptatem aut hic, at quod consequatur veniam nulla rerum exercitationem! Vel, libero molestiae quaerat accusamus et impedit, odio ab ad labore harum incidunt? Voluptatibus porro id deserunt, necessitatibus voluptatum sint accusamus. Consectetur, ullam magnam? Ea ducimus rerum at eum magnam dicta distinctio! Veniam eum itaque voluptas similique tempora. Mollitia fugiat reprehenderit molestiae, distinctio explicabo eligendi porro dicta vel iusto quia commodi dolor possimus voluptate iure quibusdam et! Repellat quidem velit fugit tenetur numquam minima, assumenda obcaecati corporis deserunt esse consequatur, nobis quasi. Minima aliquam nulla eos perspiciatis nisi, corrupti ea doloribus totam consequuntur, voluptate itaque facilis quod eligendi neque dolores aut suscipit id aperiam temporibus fugit exercitationem. Aperiam quis aspernatur nulla quisquam asperiores. Quisquam enim iste et ex. Veritatis commodi et rerum facilis, est reprehenderit quaerat ullam debitis voluptatem illum officia quibusdam dolores eveniet iusto fuga! Error eveniet doloremque aspernatur et, aliquid alias, voluptatum repellat eligendi, voluptatibus consectetur quasi fuga expedita nisi modi voluptas eos animi enim beatae numquam incidunt accusantium. Modi eveniet explicabo adipisci tempore sapiente necessitatibus eius cupiditate sit, eum praesentium! Sunt dolore quo, facere corrupti dolorum tenetur ex dicta minima deserunt quaerat esse at necessitatibus! Quidem praesentium deserunt saepe placeat alias necessitatibus hic minima unde esse, repellat beatae sed sequi in voluptatibus officiis neque culpa autem id, aliquam ad? Officiis, quaerat qui sit provident vero, voluptates quisquam, porro autem deleniti aspernatur quibusdam debitis ab eligendi iste perferendis non quis. Aliquid doloribus vel fugiat, voluptates cum non, sequi quidem provident soluta corrupti atque! Dicta expedita, temporibus debitis vero accusamus iure doloremque soluta odit minus deleniti quibusdam dolore ipsa ea maiores laboriosam sapiente minima? Velit inventore minus fuga cumque laborum quibusdam tempore, culpa odio explicabo omnis unde quaerat doloremque vel beatae voluptatum suscipit maxime hic, quis amet nostrum optio. Modi aperiam, dolorem fugiat sed molestias unde odit ullam? Maxime, eius quibusdam? Excepturi deserunt perspiciatis reprehenderit temporibus eaque quae iure, earum eum quasi neque corporis magnam officia iste fuga totam hic architecto alias consequatur vitae amet? Maiores tempora minima ea quia officia, similique id corrupti quam nihil perspiciatis earum molestiae, veniam repellat? Deserunt voluptates dolore dignissimos ea possimus impedit et expedita ut asperiores repudiandae eius nobis facilis totam molestias iure dolor odio iste dicta, similique vel neque aperiam distinctio sapiente! Nesciunt cum provident quis facere perferendis minus consequuntur architecto, cumque ipsam magnam eveniet officia quaerat voluptatem repellat magni et aut, nobis, impedit quam earum neque. Explicabo obcaecati sunt aut magnam aspernatur non omnis iste aliquid nulla ut corrupti quaerat labore ratione, odio cumque ea nihil dolores velit laudantium? Aspernatur autem sapiente odio provident atque soluta maiores, odit eum impedit dicta, explicabo similique exercitationem eaque aliquam dolores officiis tempora numquam fugit? Architecto veritatis vel iste, dicta atque ipsa quisquam quibusdam quis corrupti. Labore assumenda asperiores eius consequuntur est veritatis aliquid, minus ullam quidem, sequi beatae tenetur. Dolorum sit veritatis eveniet quam non aspernatur assumenda doloribus illo, accusantium nihil nesciunt dolores quasi, dicta atque numquam iure quaerat velit explicabo. Excepturi consequatur temporibus deserunt ut dolores, doloribus pariatur.
</p>
<script>
const html_elem = document.documentElement;
const item1 = document.querySelector('.item1');
const item2 = document.querySelector('.item2');
const item3 = document.querySelector('.item3');
// clientTop / offsetTop / scrollTop
// 공통점: Element를 선택해서 사용해야 한다.
// clientTop
console.group('clientHeight');
console.log('HTML의 clientHeight => ' + html_elem.clientHeight);
console.log('item1의 clientHeight => ' + item1.clientHeight);
console.log('item2의 clientHeight => ' + item2.clientHeight);
console.log('item3의 clientHeight => ' + item3.clientHeight);
console.groupEnd('clientHeight');
// offsetHeight
console.group('offsetHeight');
console.log('HTML의 offsetHeight => ' + html_elem.offsetHeight);
console.log('item1의 offsetHeight => ' + item1.offsetHeight);
console.log('item2의 offsetHeight => ' + item2.offsetHeight);
console.log('item3의 offsetHeight => ' + item3.offsetHeight);
console.groupEnd('offsetHeight');
// scrollHeight
console.group('scrollHeight');
console.log('HTML의 scrollHeight => ' + html_elem.scrollHeight);
console.log('item1의 scrollHeight => ' + item1.scrollHeight);
console.log('item2의 scrollHeight => ' + item2.scrollHeight);
console.log('item3의 scrollHeight => ' + item3.scrollHeight);
console.groupEnd('scrollHeight');
</script>
</body>
</html>clinetHeight
[공식]
안쪽 높이(content height) + padding - scrollbar
item3의 clientHeight 값: 360 + 16 + 16 - 14 = 378
*크롬의 스크롤바의 두께는 14이다.
*스크롤바의 값은 padding-bottom에 포함 돼 있다.
offsetHeight
[공식]
안쪽 높이(content height + scrollbar) + padding + border
item3의 offsetHeight 값: 360 + 16 + 16 + 2 + 6 = 400
*크롬의 스크롤바의 두께는 14이다.
*스크롤바의 값은 padding-bottom에 포함 돼 있기 때문에 별도로 더할 필요가 없다.
scrollHeight
[공식이 없다.]
overflow로 가려진 부분을 포함하는 컨텐츠 전체의 높이
*margin과 padding은 값에 영향을 주지만, border는 영향을 주지 않는다.
'이론 > JS' 카테고리의 다른 글
| [JS] 자료형 변환 (0) | 2021.01.02 |
|---|---|
| [JS] Q. 리터럴과 생성자의 차이는? (0) | 2020.12.31 |
| [JS] setTimeout / setInterval (0) | 2020.12.30 |
| [JS] window.innerHeight / outerHeight (0) | 2020.12.30 |
| [JS] Element.clientTop / offsetTop / scrollTop (0) | 2020.12.29 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 프로퍼티
- clinetTop
- constructor
- javascript class
- 동치 연산자
- [[Prototype]]
- property
- 링크막기 #a링크막기
- 부등 연산자
- 일치 연산자
- clientHeight
- scrollHeight
- prototype 프로퍼티
- innerHeight
- 객체의 프로퍼티
- 불일치 연산자
- __proto__
- 대괄포 표기법
- offsetHeight
- @font-face
- offsetTop
- outerHeight
- 동등 연산자
- scrollTop
- 점 표기법
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 |
글 보관함