DOM 요소 내부의 텍스트 줄 수를 계산하는 방법

개요

문서 객체 모델(DOM) 요소 내부의 텍스트 줄 수는

,

또는 DOM 요소의 높이인 "offsetHeight"를 출력의 줄 높이로 나누어 총 줄 수를 제공합니다.

두 번째 방법에서는 배열의 분할() 메서드를 사용하며 여기서 개행 문자를 매개변수로 전달합니다. 따라서 배열은 개행 문자 전후의 요소로 생성되고 배열의 길이를 계산합니다.

알고리즘

1단계 − HTML 템플릿을 만들고 여기에 line-height가 있는 div 요소를 추가합니다. Line-height는 특정 줄의 높이입니다. 또한 출력이 생성될 범위 태그를 만듭니다.

2단계 − 이제 스크립트 태그에서 행의 상위 요소에 액세스합니다. 부모 요소의 전체 높이를 계산하려면 offsetHeight를 사용하세요. 으아악

3단계 − 스타일 속성을 사용하여 행의 행 높이 값을 가져옵니다. 행 높이 값에는 "px" 단위도 포함되어 있으므로, 여기서 숫자를 가져오려면parseInt() 함수를 사용해야 합니다.

4단계 − 이제 추출된 값, 즉 domHeight와 line-height를 분할합니다. 으아악

5단계 - "totalLines" 변수에는 상위 요소의 줄 수가 포함됩니다. 그러면 범위 태그의 행 수가 반환됩니다.

Example

의 중국어 번역은

Example

입니다.

이 예에서는 전체 DOM(문서 객체 모델) 요소의 높이를 계산하고,

offsetHeight 속성을 사용하여 DOM 요소의 높이를 얻은 다음, DOM 높이를 행으로 나누어 행 수를 계산합니다. DOM에 있는 총 행 수를 출력합니다. 으아악

아래 이미지는 위 예시의 출력을 보여줍니다. 여기에는 DOM 요소의 "offsetHeight"를 분할하고 범위 태그의 요소 수를 반환하는 "30px" 줄 높이가 포함되어 있습니다.

알고리즘

1단계−HTML 템플릿을 만들고 그 안에 div 요소를 추가합니다. 출력을 생성하는 데 사용되는 범위 태그를 만듭니다.

2단계− 이제 document.getElementById()를 사용하여 상위 요소 내부의 텍스트에 액세스합니다. 으아악

3단계−arraysplit() 메소드를 사용하여 개행 문자("

")를 매개변수로 전달합니다. 분할 방법은 텍스트 줄을 배열의 한 요소로 저장합니다.

4단계− 이제 배열의 길이 방법을 사용하여 요소의 텍스트 줄 수를 반환하는 배열의 길이를 계산하겠습니다. 으아악

5단계 −을 사용하여 스팬 태그의 텍스트 줄 수 출력을 표시합니다. 으아악

여기에서는 모든 텍스트 줄의 시작 앞에 삽입되는 추가 줄 바꿈 요소가 포함되어 있기 때문에 "numLines"에서 1을 뺍니다.

Example

의 중국어 번역은

Example

입니다.

이 예에서는 변수의 DOM에 액세스하는 배열 분할() 메서드를 사용하고

분할(“

”)

메서드를 사용하여 줄 수를 계산합니다. 줄이 바뀔 때 배열의 모든 요소를 ​​저장하는 인수로 중단합니다. 그런 다음 배열의 길이를 계산하여 DOM에서 사용할 수 있는 텍스트 줄 수를 반환합니다. 으아악 아래 이미지에서는 세 개의 텍스트 줄이 모두 배열에 요소로 저장되어 있는 위 예제의 출력을 보여줍니다. 따라서 배열의 길이를 계산하면 3이 반환됩니다.

结论

첫 번째 예에서는 line-height 값에 문자열 값도 포함되어 있으므로 parsInt()를 사용하여 line-height 값을 구문 분석해야 했습니다. 해당 값을 "offsetHeight" 값에서 나누면 (NaN)이 반환됩니다. "숫자 아님". 그래서 우리는 parInt()를 사용했지만, 이를 10진수로 반환하고 싶다면 parseFloat()를 사용할 수도 있습니다.

위 내용은 DOM 요소 내부의 텍스트 줄 수를 계산하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!