JavaScript를 사용하여 CSS 값을 검색하려면 어떻게 해야 합니까?

JavaScript로 CSS 값 가져오기

JavaScript로 CSS 값 설정(예: document.getElementById('image_1').style) 외에도 .top = '100px'), 특정 스타일 속성의 현재 값을 검색할 수도 있습니다. 이는 현재 스타일에 따라 요소의 모양을 동적으로 조정하는 등 다양한 목적에 유용할 수 있습니다.

특정 CSS 속성의 값을 얻으려면 getComputeStyle() 메서드를 사용할 수 있습니다. 이 메소드는 요소를 인수로 사용하고 해당 요소의 계산된 스타일을 나타내는 CSSStyleDeclaration 객체를 반환합니다. CSSStyleDeclaration 객체의 각 속성은 CSS 속성에 해당하며 속성 값은 해당 스타일 속성에 대해 계산된 값을 반영합니다.

예는 다음과 같습니다.

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

이 예에서는 , getCompulatedStyle() 메서드는 ID가 "image_1"인 요소의 계산된 스타일을 검색하는 데 사용됩니다. 그런 다음 getPropertyValue() 메서드를 사용하여 이 요소의 'top' 스타일 속성 값을 가져옵니다. 그런 다음 'top' 속성 값(이 예에서는 '100px'일 가능성이 높음)을 top 변수를 통해 사용할 수 있으며 JavaScript 코드 내에서 추가 처리 또는 조작에 사용할 수 있습니다.

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