다시 로드하지 않고 웹 페이지에서 CSS 스타일을 동적으로 변경하려면 어떻게 해야 합니까?

즉시 CSS 스타일 교체

웹 페이지의 CSS 스타일을 동적으로 변경하여 한 스타일시트를 다른 스타일시트로 바꾸고 싶습니다. 바닐라 JavaScript 또는 jQuery에서는 필요한 모든 스타일시트를 포함시킨 다음 선택적으로 활성화하거나 비활성화하여 이를 달성할 수 있습니다.

옵션 1: rel=alternate 전환

스타일시트 포함 "rel=alternate"를 사용하고 해당 상태를 전환합니다:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark"></code>

<code class="javascript">function enableStylesheet (node) {
  node.rel = 'stylesheet';
}

function disableStylesheet (node) {
  node.rel = 'alternate stylesheet';
}</code>

옵션 2: 설정 및 전환 비활성화

"rel=stylesheet"로 스타일시트 포함 및 "class=alternate", "disabled" 속성 전환:

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate"></code>

<code class="javascript">function enableStylesheet (node) {
  node.disabled = false;
}

function disableStylesheet (node) {
  node.disabled = true;
}</code>

옵션 3: media=none 전환

"이 포함된 스타일시트 포함 media=none"을 선택하고 해당 "media" 속성을 전환합니다.

<code class="html"><link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark"></code>

<code class="javascript">function enableStylesheet (node) {
  node.media = '';
}

function disableStylesheet (node) {
  node.media = 'none';
}</code>

getElementById, querySelector 또는 기타 방법을 사용하여 스타일시트 노드를 선택합니다. 원하는 경우 추가 처리를 위해 jQuery를 사용하십시오. 이 접근 방식을 사용하면 페이지를 다시 로드하지 않고도 CSS 스타일을 즉시 전환할 수 있습니다.

위 내용은 다시 로드하지 않고 웹 페이지에서 CSS 스타일을 동적으로 변경하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!