CSS 파일을 즉시 교체(그리고 새로운 스타일을 페이지에 적용)
는 다음페있습다니가지이▁가 있는 페이지를 있습니다.<link>에 " 를이지된정 CSS"라는 이름의 CSS를 합니다.light.css는 또한 이이붙파있습라는 이름의 있습니다.dark.css나는 페이지의 스타일을 모두 바꿀 수 있는 버튼을 원합니다(css 파일에는 40개의 셀렉터가 사용되고 있고 일부는 두 개의 파일에 일치하지 않습니다).
에 대한 참조를 제거하려면 어떻게 해야 합니까?light.css된 모든 스타일을 한 후 JS를 JS 사용적모든제다로음거드다니합한을타일스용여된하.dark.css그리고 그것의 모든 스타일을 적용합니까?일부 스타일은 다른 css 파일을 통해 적용되고 일부는 JS에 의해 동적으로 생성되기 때문에 모든 요소를 단순히 재설정할 수 없습니다.페이지를 다시 로드하지 않고 간단하고 효과적인 방법이 있습니까?바닐라 JS가 더 좋지만, 어차피 나중에 처리할 때는 jQuery를 사용할 것이기 때문에 jQ도 괜찮습니다.
문서에 모든 스타일시트를 포함한 후 필요에 따라 활성화/비활성화할 수 있습니다.
제가 본 사양서에서는 속성을 true에서 false로 변경하여 대체 스타일시트를 활성화할 수 있어야 하는데 파이어폭스만 이를 올바르게 수행하는 것 같습니다.
그래서 몇 가지 선택지가 있다고 생각합니다.
토글 글rel=alternate
<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">
<script>
function enableStylesheet (node) {
node.rel = 'stylesheet';
}
function disableStylesheet (node) {
node.rel = 'alternate stylesheet';
}
</script>
설정 및 전환disabled
<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">
<script>
function enableStylesheet (node) {
node.disabled = false;
}
function disableStylesheet (node) {
node.disabled = true;
}
document
.querySelectorAll('link[rel=stylesheet].alternate')
.forEach(disableStylesheet);
</script>
토글 글media=none
<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">
<script>
function enableStylesheet (node) {
node.media = '';
}
function disableStylesheet (node) {
node.media = 'none';
}
</script>
getElementById, querySelector 등으로 스타일시트 노드를 선택할 수 있습니다.
(비표은피)은 피함)<link disabled>HTMLinkElement#disabled를 설정해도 괜찮습니다.)
새 링크를 만들고 이전 링크를 새 링크로 바꿀 수 있습니다.기능에 넣으면 필요한 곳 어디서나 재사용할 수 있습니다.
Javascript:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
HTML:
<html>
<head>
<title>Changing CSS</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
</head>
<body>
<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
</body>
</html>
단순화를 위해 인라인 자바스크립트를 사용했습니다.프로덕션에서는 방해가 되지 않는 이벤트 수신기를 사용할 수 있습니다.
링크 요소에 ID를 설정한 경우
<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>
자바스크립트로 타겟팅 할 수 있습니다.
document.getElementsByTagName('head')[0].getElementById('stylesheet').href='stylesheet2.css';
아니면 그냥..
document.getElementById('stylesheet').href='stylesheet2.css';
다음은 더 철저한 예입니다.
<head>
<script>
function setStyleSheet(url){
var stylesheet = document.getElementById("stylesheet");
stylesheet.setAttribute('href', url);
}
</script>
<link id="stylesheet" rel="stylesheet" type="text/css" href="stylesheet1.css"/>
</head>
<body>
<a onclick="setStyleSheet('stylesheet1.css')" href="#">Style 1</a>
<a onclick="setStyleSheet('stylesheet2.css')" href="#">Style 2</a>
</body>
이 질문은 꽤 오래되었지만 여기서 언급되지 않은 접근법을 제안하고 싶습니다. HTML에 CSS 파일을 모두 포함시키겠지만 CSS는 다음과 같습니다.
경쾌한
/*** light.css ***/
p.main{
color: #222;
}
/*** other light CSS ***/
그리고 어둡습니다. 그들은 마치.
/*** dark.css ***/
.dark_theme p.main{
color: #fff;
background-color: #222;
}
/*** other dark CSS ***/
in dark.'는의 이 될 입니다. 선택기는 의 자녀가 될 것입니다..dark_theme
그런 다음 웹 사이트의 테마를 변경하기로 선택한 경우 본문 요소의 클래스를 변경하기만 하면 됩니다.
$("#changetheme").click(function(){
$("body").toggleClass("dark_theme");
});
그리고 이제 사용자가 클릭하면 모든 요소가 어두운 CSS를 가질 것입니다.#changethemeCSS 프리프로세서를 사용하는 경우 이 작업은 매우 쉽습니다.
또한 배경 및 색상에 대한 CSS 애니메이션을 추가하여 전환을 매우 부드럽게 할 수 있습니다.
jquery를 사용하면 css 파일을 확실히 스왑할 수 있습니다.버튼 클릭 시 이 작업을 수행합니다.
var cssLink = $('link[href*="light.css"]');
cssLink.replaceWith('<link href="dark.css" type="text/css" rel="stylesheet">');
아니면 샘의 대답으로, 그것도 효과가 있습니다.여기에 jquery 구문이 있습니다.
$('link[href*="light.css"]').prop('disabled', true);
$('link[href*="dark.css"]').prop('disabled', false);
jquery.attr()을 사용하여 링크 태그의 href를 설정할 수 있습니다.
샘플코드
$("#yourButtonId").on('click',function(){
$("link").attr(href,yourCssUrl);
});
제가 너무 복잡한 생각을 하고 있는지도 모르지만, 수락된 답변이 저에게 효과가 없었기 때문에 저도 제 해결책을 공유해야겠다고 생각했습니다.
제가 하고 싶었던 것은 '메인' 스타일에 추가된 추가 스타일시트로 제 페이지의 다른 '스킨'을 머리에 포함시키고 페이지의 버튼(브라우저 설정 또는 기타 설정 없음)을 눌러 변경하는 것이었습니다.
문제:
저는 @sam의 솔루션이 매우 우아하다고 생각했지만 저에게는 전혀 효과가 없었습니다.적어도 문제의 일부는 제가 하나의 메인 CSS 파일을 사용하고 있고 위에 다른 파일을 '스킨'으로 추가하기 때문에 누락된 '제목' 속성을 가진 파일을 그룹화해야 한다는 것입니다.
여기 제가 생각해 낸 것이 있습니다.
먼저 '대체'를 사용하여 모든 '피부'를 머리에 추가합니다.
<link rel="stylesheet" href="css/main.css" title='main'>
<link rel="stylesheet alternate" href="css/skin1.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin2.css" class='style-skin' title=''>
<link rel="stylesheet alternate" href="css/skin3.css" class='style-skin' title=''>
참고로 메인 CSS 파일에 제목='main'을 지정했고 다른 모든 파일에는 클래스='style-skin'이 있으며 제목은 없습니다.
을 위해 jQueryj를 Query를 사용하여 스킨을 전환합니다.우아한 바닐라를 찾는 것은 순수한 사람들에게 맡깁니다.JS 버전:
var activeSkin = 0;
$('#myButton').on('click', function(){
var skins = $('.style-skin');
if (activeSkin > skins.length) activeSkin=0;
skins.each(function(index){
if (index === activeSkin){
$(this).prop('title', 'main');
$(this).prop('disabled', false);
}else{
$(this).prop('title', '');
$(this).prop('disabled', true);
}
});
activeSkin++
});
사용 가능한 모든 스킨을 반복하고 활성화된 스킨을 사용하여 제목을 '메인'으로 설정한 후 활성화합니다.다른 모든 스킨은 비활성화되고 제목은 제거됩니다.
하기 ㅠㅠㅠㅠㅠㅠㅠLink당신의 새로운 css 파일에 대한 href 속성.
function setStyleSheet(fileName){
document.getElementById("WhatEverYouAssignIdToStyleSheet").setAttribute('href', fileName);
}
램프의 예를 다시 작성했는데, 선택기를 사용하여 클래스를 추가할 수 있습니다. 먼저 자바스크립트의 특정 선택기에 클래스를 적용합니다(내 HTML에서 특정 요소 선택기에 대해 필요한 횟수만큼 반복).
$("p:nth-of-type(even)").toggleClass("main mainswitch");
그러면 html은 이렇게 보입니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".mainswitch").toggleClass("main");
});
});
</script>
<style>
.main {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<div>
<p>This is a paragraph.</p>
<p class="main mainswitch">This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
<button>Toggle class "main" for p elements</button>
</body>
</html>
Angular를 사용하는 경우(2013년이 아니기 때문에) 여기에서 정답/솔루션/제안을 시도할 수 있습니다.
클릭 이벤트에서 대상 CSS 파일을 변경하려면 어떻게 해야 합니까?
그것은 저에게 효과가 있었습니다.
이것이 최선의 해결책은 아니지만 다음과 같은 작업도 수행할 수 있습니다.
<head>
<link href="//awesome-style-sunny.css" rel="stylesheet" id="default-style"></link>
<link href="//awesome-style-sunny.css" rel="stylesheet" id="themed-style"></link>
</head>
동일한 스타일이 두 번 로드되는 것을 볼 수 있듯이, 이는 두 번째 스타일을 전환할 때 도움이 됩니다.href당신의 사용자들은 어떤 스타일도 없이 벌거벗은 웹사이트를 볼 수 없을 것입니다.
스타일의 순서는 나중의 것이 첫 번째 것보다 우선하기 때문에 중요합니다.그러면 대부분의 답변에 언급된 것처럼 다음과 같은 작업을 수행할 수 있습니다.
const changeTheme = (theme) => {
if (document.getElementById("themed-style")) {
document.getElementById("themed-style").href = theme
localStorage.setItem("user-theme", theme);
}
}
언급URL : https://stackoverflow.com/questions/19844545/replacing-css-file-on-the-fly-and-apply-the-new-style-to-the-page
'programing' 카테고리의 다른 글
| 여러 매개 변수가 있는 EXEC sp_executesql (0) | 2023.09.04 |
|---|---|
| 내 ember.js 경로 모델이 호출되지 않는 이유는 무엇입니까? (0) | 2023.09.04 |
| IIS에서 X-Powered-By ASP를 안전하게 제거할 수 있습니까?NET 헤더? (0) | 2023.09.04 |
| MariaDB에서 MySQL로 가져올 때 오류 발생 (0) | 2023.09.04 |
| 프로그래밍 방식으로 Windows 10 개발자 모드 사용 (0) | 2023.09.04 |