JavaScript에서 CSS 값을 얻는 방법이 있습니까?

이 기사의 내용은 JavaScript에서 CSS 값을 얻는 방법에 대한 것입니다. 어떤 방법이 있고 특정 참조 값이 있습니까? 도움이 필요한 친구들에게 도움이 되길 바랍니다.

때로는 CSS만으로는 충분하지 않을 때가 있습니다. CSS 값을 제어하려면 JavaScript를 사용해야 할 수도 있습니다. 그런데 JavaScript에서 CSS 값을 어떻게 얻나요?

인라인 또는 계산된 스타일을 얻으려는지에 따라 두 가지 가능한 방법이 있습니다.

인라인 스타일 가져오기

인라인 스타일은 HTML 스타일 속성에 존재하는 스타일입니다.

HTML 코드:

<div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div>

인라인 스타일을 얻으려면 스타일 속성을 사용할 수 있습니다.

JavaScript 코드:

const element = document.querySelector（'.element'）
const fontSize = element.style.fontSize
console.log（fontSize） // 2em
const color = element.style.color
console.log（color） // red

계산된 스타일 가져오기

스타일이 CSS 파일로 작성된 경우 계산된 스타일을 가져와야 합니다. 이를 위해 getComputeStyle을 사용할 수 있습니다.

두 가지 값이 있습니다.

JavaScript 코드:

const style = getComputedStyle（Element, ）；

여기서 요소는 querySelector를 사용하여 선택한 요소를 나타냅니다.

여기서 pseudoElement는 가져오려는 의사 클래스 요소(있는 경우)의 문자열을 나타냅니다. 의사 요소를 선택하지 않은 경우 이 값을 생략할 수 있습니다.

예시를 통해 이해를 도와드리겠습니다. 다음과 같은 HTML과 CSS가 있다고 가정해 보겠습니다.

HTML 코드:

<div class="element"> This is my element </div>

CSS 코드:

.element { background-color: red }

먼저 querySelector를 사용하여 요소를 선택해야 합니다. 그런 다음 getCompulatedStyle을 사용하여 요소의 스타일을 가져옵니다.

JavaScript 코드:

const element = document.querySelector（'.element'）
const style = getComputedStyle（element）

console.log(style)로 인쇄하면 각 CSS 속성과 해당 값이 포함된 개체가 표시됩니다.

위는 JavaScript에서 CSS 값을 얻는 방법에 대한 완전한 소개입니다. JavaScript Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 JavaScript에서 CSS 값을 얻는 방법이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!