즉석에서 CSS 파일 교체 (페이지에 새 스타일 적용)
<link>라는 CSS를로드하는 헤더에 페이지가 있습니다 light.css. 또한 dark.css. (css 파일에는 40 개의 개별 선택기가있는 두 파일에서 일치하지 않습니다).
light.cssJS로 참조를 제거하고 모든 스타일을 제거하고 다음 여기에서 모든 스타일을 dark.css적용해야합니까? 일부 스타일은 다른 CSS 파일을 통해 적용되고 일부는 JS에 의해 동적으로 생성되기 때문에 모든 요소를 간단히 사용할 수 없습니다. 페이지를 다시로드하지 않고 간단하면서도 효과적인 방법이 있습니까? Vanilla JS가 나중에 나중에 처리하기 위해 jQuery를 사용하여 jQ도 좋습니다.
새 링크를 만들고 이전 링크를 새 링크로 변경할 수 있습니다. 함수에 필요면 필요할 때마다 필요할 때 사용할 수 있습니다.
자바 펼쳐 :
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(0).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>
간단하게하기 위해 인라인 자바 펼쳐보기를 사용했습니다. 여기서에서는 눈에 거슬리지 않는 이벤트 리스너를 사용하고 싶을 것입니다.
문서에 모든 스타일 시트를 포함시킨 다음 필요에 따라 활성화 / 할 수 있습니다.
을 읽었을 사양 때 disabled속성을 참에서 거짓 로 변경하여 대체 스타일 시트 를 활성화 할 수 있어야 하지만 파이어 폭스만이 작업을 올바르게 수행하는 것 같습니다.
따라서 몇 가지 옵션이 생각합니다.
비녀장 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>. HTMLLinkElement # disabled 설정 은 괜찮습니다.)
링크 요소에 ID를 설정 한 경우
<link rel="stylesheet" id="stylesheet" href="stylesheet1.css"/>
Javascript로 타겟팅 할 수 있습니다.
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>
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);
이 질문은 꽤 오래되었지만 여기에 언급되지 않은 접근 방식을 제안합니다. 여기서는 HTML에 두 CSS 파일을 모두 포함하지만 CSS는 다음과 같습니다.
light.css
/*** light.css ***/
p.main{
color: #222;
}
/*** other light CSS ***/
그리고 dark.css 는
/*** dark.css ***/
.dark_layout p.main{
color: #fff;
background-color: #222;
}
/*** other dark CSS ***/
dark.css의 모든 선택기는 .dark_layout
그런 다음 누군가 웹 사이트의 테마를 변경하기로 선택한 경우 body 요소의 클래스를 변경하기 만하면됩니다.
$("#changetheme").click(function(){
$("body").toggleClass("dark_layout");
});
이제 사용자가를 클릭하면 모든 요소에 어두운 CSS가 표시됩니다 #changetheme. 모든 종류의 CSS 전처리기를 사용하는 경우 매우 쉽습니다.
전환을 매우 부드럽게 만드는 배경 및 색상에 대한 CSS 애니메이션을 추가 할 수도 있습니다.
JQuery와 사용 .attr () 사용자가 설정할 수 href가 귀하의 링크 태그 .IE을
샘플 코드
$("#yourButtonId").on('click',function(){
$("link").attr(href,yourCssUrl);
});
나는 너무 복잡하다고 생각할 수도 있지만, 받아 들여진 대답이 나에게 효과가 없었기 때문에 나는 내 솔루션도 공유 할 것이라고 생각했다.
스토리 :
내가하고 싶었던 것은 내 페이지의 다른 '스킨'을 '기본'스타일에 추가 한 추가 스타일 시트로 헤드에 포함시키고 페이지의 버튼을 눌러 전환하는 것이 었습니다 (브라우저 설정이나 항목 없음).
문제 :
@sam의 솔루션이 매우 우아하다고 생각했지만 전혀 작동하지 않았습니다. 문제의 적어도 일부는 내가 하나의 메인 CSS 파일을 사용하고 있고 다른 파일을 '스킨'으로 추가하기 때문에 누락 된 '제목' 속성으로 파일을 그룹화해야한다는 것 입니다.
여기에 내가 생각 해낸 것이 있습니다.
먼저 'alternate'를 사용하여 모든 '스킨'을 머리에 추가하십시오.
<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 파일에 title = 'main'을 지정했고 다른 모든 파일에는 class = 'style-skin'이 있고 제목은 없습니다.
스킨을 전환하려면 jQuery를 사용하고 있습니다. 우아한 VanillaJS 버전을 찾기 위해 순수 주의자들에게 맡기겠습니다.
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++
});
사용 가능한 모든 스킨을 반복하고, 곧 활성화 된 스킨을 가져 와서 제목을 'main'으로 설정하고 활성화합니다. 다른 모든 스킨은 비활성화되고 제목이 제거됩니다.
'ProgramingTip' 카테고리의 다른 글
| ggplot2 : 정렬 정렬 (0) | 2021.01.09 |
|---|---|
| 해시의 키에 모든 키 집합이 존재 확인 (0) | 2021.01.09 |
| elm에서`<<`연산자는 무엇을 의미합니까? (0) | 2021.01.09 |
| 새 Chrome에서 드롭 다운 메뉴 검사 (0) | 2021.01.09 |
| NSMutableArray addObject가 작동하지 않습니다. (0) | 2021.01.09 |