JavaScript에서 DIV의 실제 줄 높이를 찾는 방법은 무엇입니까?

JavaScript에서 DIV의 실제 줄 높이 찾기

JavaScript에서는 DIV의 실제 줄 높이를 결정하는 것이 종종 바람직합니다. , CSS 속성에 의존하는 대신. 이는 CSS에서 line-height가 명시적으로 정의되지 않은 경우 특히 유용합니다.

도전

style.lineHeight 속성을 확인하는 기존 방법은 CSS 정의 line-height, 그러나 이 값은 페이지에 렌더링된 실제 줄 높이를 정확하게 반영하지 않을 수 있습니다.

해결책: ClientHeight 사용

해결책은 clientHeight 속성을 활용하는 것입니다. 패딩 및 테두리를 포함하여 요소의 높이를 측정하는 이 속성은 다음 조건에서 DIV의 줄 높이를 결정하는 데에도 사용할 수 있습니다.

• 글꼴 모음과 글꼴 크기는 다음과 같습니다. 모든 줄에 걸쳐 동일합니다.
• CSS나 인라인 스타일을 통해 적용된 추가 줄 높이 속성은 없습니다.

구현

clientHeight를 사용하여 실제 줄 높이를 얻으려면 다음 단계를 따르세요.

1. DIV를 복제합니다. 문제가 있는 경우 모든 관련 스타일이 상속되는지 확인하세요.
2. 복제된 스타일을 설정하세요. DIV의 innerHTML을 "A"와 같은 단일 문자로 변환합니다.
3. 복제된 DIV를 원본 DIV의 상위 노드에 추가합니다.
4. 복제된 DIV의 클라이언트 높이를 계산합니다.
5. 제거 복제된 DIV document.

코드 조각

function getLineHeight(el) {
    var temp = document.createElement(el.nodeName), ret;
    temp.setAttribute("style", "margin:0; padding:0; "
        + "font-family:" + (el.style.fontFamily || "inherit") + "; "
        + "font-size:" + (el.style.fontSize || "inherit"));
    temp.innerHTML = "A";

    el.parentNode.appendChild(temp);
    ret = temp.clientHeight;
    temp.parentNode.removeChild(temp);

    return ret;
}

이 접근 방식은 DIV의 실제 줄 높이를 정확하게 측정할 수 있는 간단하면서도 효과적인 방법을 제공합니다. 모든 CSS 속성이 재정의됩니다.

위 내용은 JavaScript에서 DIV의 실제 줄 높이를 찾는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!