scrollWidth, clientWidth 및 offsetWidth_Experience 교환의 차이점-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

scrollWidth, clientWidth 및 offsetWidth_Experience 교환의 차이점

PHP中文网

May 16, 2016 pm 12:07 PM

offsetwidth

scrollWidth, clientWidth 및 offsetWidth_Experience 교환의 차이점

scrollWidth
은 가장자리 너비를 제외한 개체의 실제 콘텐츠 너비이며 콘텐츠에 따라 변경됩니다. (더 많은 내용은 개체의 실제 너비를 변경할 수 있습니다).
clientWidth
는 스크롤 막대와 기타 가장자리를 제외한 개체의 표시 너비이며 창의 표시 크기에 따라 변경됩니다.
offsetWidth
는 스크롤 막대 및 기타 가장자리를 포함하여 창의 표시 크기에 따라 변경되는 개체의 표시 너비입니다.

scrollWidth 및 clientWidth의 예:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(&#39;scrollWidth:&#39;+this.scrollWidth+&#39;\n clientWidth:&#39;+this.clientWidth);">
</textarea>  
</body>  
</html>

로그인 후 복사

가로 스크롤 막대가 표시되지 않는 경우 텍스트 상자에 내용을 입력합니다. 동일합니다. 내용 줄이 텍스트 상자 너비를 초과하면 가로 스크롤 막대가 나타나고 scrollWidth 값이 변경됩니다.
scrollWidth는 객체의 실제 콘텐츠 너비입니다.
clientWidth는 개체에 표시되는 너비(가장자리 제외)이며 이 예에서는 변경되지 않습니다.

clientWidth 및 offsetWidth의 예:

<html>  
<head>  
<title>77.htm文件</title>  
</head>  
<body>  
<textarea wrap="off" onfocus="alert(&#39;offsetWidth:&#39;+this.offsetWidth+&#39;\n clientWidth:&#39;+this.clientWidth);">
</textarea>  
</body>  
</html>

로그인 후 복사

offsetWidth 값은 항상 clientWidth 값보다 큽니다.
clientWidth는 객체에 표시되는 너비입니다(가장자리 제외).
offsetWidth는 객체에 표시되는 너비입니다(가장자리 포함, 스크롤 막대가 차지하는 너비)

위는 scrollWidth입니다. clientWidth와 offsetWidth_Experience 교환 내용의 차이점은 PHP 중국어 웹사이트(www.php.cn)에서 더 많은 관련 내용을 참고하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.