JavaScript를 사용하여 CSS 스타일 속성을 어떻게 동적으로 변경할 수 있습니까?

JavaScript를 사용하여 스타일 속성을 동적으로 수정

DIV 요소에 대해 정의된 CSS 스타일 시트가 있다고 가정합니다. JavaScript를 사용하여 해당 DIV의 특정 속성을 동적으로 수정해야 할 필요성이 발생합니다. 이를 효과적으로 달성하려면 어떻게 해야 합니까?

Simply Put...

스타일 속성을 동적으로 변경하려면 다음 구문을 사용하십시오.

document.getElementById("elementID").style.attributeName = "newAttributeValue";

예:

document.getElementById("xyz").style.paddingTop = "10px";

이 코드는 성공적으로 수정되었습니다. ID가 "xyz"인 DIV의 padding-top 속성을 "10px" 값으로 변경합니다.

스타일 속성에 대한 대체 표기법:

또한 스타일 속성에 대시 표기법을 활용할 수도 있습니다.

document.getElementById("xyz").style["padding-top"] = "10px";

이 대체 구문을 사용하면 다음을 사용하여 스타일 속성을 지정할 수 있습니다. 하이픈으로 연결된 CSS와 동일합니다.

위 내용은 JavaScript를 사용하여 CSS 스타일 속성을 어떻게 동적으로 변경할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!