JavaScript를 사용하여 특정 CSS 값을 효율적으로 검색하려면 어떻게 해야 합니까?

JavaScript로 CSS 값 검색

style 속성을 사용하면 JavaScript로 CSS 값을 설정하는 것이 간단하지만 현재 CSS 값을 가져오는 것이 더 어려울 수 있습니다. . 이 문서에서는 전체 스타일 문자열을 구문 분석하지 않고 특정 CSS 값을 검색하는 방법에 대한 질문을 다룹니다.

해결책: getCompulatedStyle()

이 문제에 대한 해결책은 다음에 있습니다. getComputedStyle() 메서드. 이 메소드를 사용하면 인라인 스타일과 상속된 스타일을 모두 포함하여 요소에 적용된 모든 CSS 값을 포함하는 요소의 계산된 스타일에 액세스할 수 있습니다.

getCompulatedStyle()을 사용하려면 해당 요소에 요소를 전달합니다. 스타일을 검색하고 싶습니다. 해당 요소에 대해 계산된 스타일 속성이 모두 포함된 개체를 반환합니다. 그런 다음 이 개체의 getPropertyValue() 메서드를 사용하여 특정 CSS 속성의 값을 검색할 수 있습니다.

다음은 ID가 image_1인 이미지 요소의 상위 CSS 값을 검색하는 방법을 보여주는 예입니다.

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

console.log(top);

이 코드는 이미지 요소의 현재 최고 값을 콘솔에 기록합니다. 상위 값은 문자열이므로 계산을 수행해야 하는 경우 먼저 숫자로 변환해야 합니다.

위 내용은 JavaScript를 사용하여 특정 CSS 값을 효율적으로 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!