페이지를 다시 로드하지 않고 CSS 파일을 동적으로 교환하는 방법은 무엇입니까?

페이지 스타일 수정을 위한 동적 CSS 파일 교환

문제:

정적 CSS 파일이 포함된 웹페이지가 있습니다. (light.css)가 헤더에 링크되어 있습니다. 페이지 스타일을 다른 CSS 파일(dark.css)로 전환하여 기존 스타일을 대체하려면 원활한 메커니즘이 필요합니다.

해결책:

CSS 파일을 동적으로 교체하려면 페이지를 다시 로드하지 않고 새 스타일을 적용하려면 다음 방법 중 하나를 활용할 수 있습니다.

1. '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. '비활성화' 속성 설정 및 전환:

<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;
}

document
  .querySelectorAll('link[rel=stylesheet].alternate')
  .forEach(disableStylesheet);</code>

3. 'media=none' 속성 전환:

<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를 사용하여 특정 CSS 파일을 대상으로 지정할 수 있습니다. , 또는 기타 선택기.
• 비표준 링크 비활성화 속성을 피하세요. HTMLLinkElement#disabled 설정은 여전히 ​​허용됩니다.
• 이 방법을 사용하면 JavaScript에 의해 동적으로 스타일이 지정될 수 있는 페이지 요소에 영향을 주지 않고 원활한 스타일 교체가 가능합니다.

위 내용은 페이지를 다시 로드하지 않고 CSS 파일을 동적으로 교환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!