JavaScript를 사용하여 CSS 스타일을 동적으로 추가하려면 어떻게 해야 합니까?

JavaScript를 사용하여 CSS 통합

JavaScript는 문서에 CSS 규칙을 동적으로 추가하기 위한 강력한 메커니즘을 제공합니다. 이 기능을 사용하면 개발자는 HTML 마크업을 수정하지 않고도 웹 페이지의 시각적 모양을 변경할 수 있습니다.

사용자 정의 스타일 추가

가장 간단한 접근 방식은 새 스타일 노드를 생성하여 추가하는 것입니다. 문서 헤드에:

<code class="javascript">// Define your custom CSS as text
var styles = `
    .my-class {
        color: red;
        font-weight: bold;
    }
`;

// Create a new style element and set its text content
var styleSheet = document.createElement("style");
styleSheet.textContent = styles;

// Append the style element to the document head
document.head.appendChild(styleSheet);</code>

이 접근 방식을 사용하면 사용자 정의 CSS 규칙이 문서에 적용되어 시각적 표현이 동적으로 향상됩니다.

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