HTML에서 글꼴 크기를 정확하게 검색하고 조정하려면 어떻게 해야 합니까?

HTML에서 글꼴 크기 검색

HTML 요소의 글꼴 크기를 가져오는 것은 간단한 작업처럼 보일 수 있습니다. 그러나 단순히 style.fontSize 속성에 액세스한다고 해서 항상 원하는 결과를 얻을 수 있는 것은 아닙니다. 특히 글꼴 크기가 외부 스타일시트에 정의된 경우 더욱 그렇습니다.

정확한 글꼴 크기 값을 얻으려면 window.getCompulatedStyle()을 활용하세요. 방법. 이 함수는 상위 요소로부터 상속된 모든 스타일을 포함하여 요소의 효과적인 스타일을 계산합니다. 예는 다음과 같습니다.

var el = document.getElementById('foo');
var style = window.getComputedStyle(el, null).getPropertyValue('font-size');
var fontSize = parseFloat(style);

이 코드는 ID가 "foo"인 요소의 계산된 글꼴 크기를 가져와서 글꼴 크기 변수에 저장합니다. 이제 실제 글꼴 크기 값에 액세스할 수 있습니다.

이 접근 방식을 사용하면 동적 글꼴 크기 조정을 구현할 수 있습니다. 예를 들면 다음과 같습니다.

el.style.fontSize = (fontSize + 1) + 'px';

이 코드 줄은 "foo" 요소의 글꼴 크기를 한 단계씩 늘립니다. "1"을 원하는 값으로 바꿔 필요에 따라 글꼴 크기를 변경할 수 있습니다.

위 내용은 HTML에서 글꼴 크기를 정확하게 검색하고 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!