로컬 저장소가있는 드롭 다운 CSS

사용자는 드롭 다운에서 테마를 선택할 수 있으며 선택한 테마는 로컬 저장소에 저장됩니다. localstorage의 드롭 다운 값을 저장할 수는 있지만 스타일 시트를 호출하지 않습니다. 도와주세요, 고마워요!로컬 저장소가있는 드롭 다운 CSS

용서 프랑켄슈타인 유형의 코드. JS는 나에게 외롭다. 나는 무역으로 디자이너이다.

<html> 
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <link href="style1.css" rel="stylesheet" type="text/css" title="s1" id="s1"/> 
</head> 
<body> 

<select id="mySelect" class="test"> 
    <option value="style1.css">Option A</option> 
    <option value="style2.css">Option B</option> 
    <option value="style3.css">Option C</option> 
</select> 


<!--local storage--> 
<script> 
$('.test').change(function() { 
    localStorage.setItem(this.id, this.value); 
}).val(function() { 
    return localStorage.getItem(this.id) 
}); 
</script> 
<!--dropdown css--> 

<script> 
     function setStyleSource (linkID, sourceLoc) { 
     var theLink = document.getElementById(linkID); 
     theLink.href = sourceLoc; 
     console.log(theLink.href); 
    } 

    document.getElementById("mySelect").addEventListener("change", function(){ 
     var selected = this.options[this.selectedIndex].value; 
     setStyleSource ("s1", selected) 
    }); 
    </script> 


</body> 
</html>

1. 드롭 다운

는 CSS 작품을 변경합니다. 2. 선택한 옵션 작업에 대한 로컬 저장. 저장된 선택 옵션은 실제로 자체 CSS 시트를 표시하지 않습니다 (대신 기본 CSS가 표시됩니다). 트리거 전에

$('.test').val(localStorage.getItem(this.id)).trigger('change'); // OR .change()

는 또한 change에 대한 이벤트 리스너를 추가 같은 : val() 나던 트리거 change 이벤트와 dropdownvalue 변경

출처

2017-12-09 BenC

console.log에 표시되는 내용은 무엇입니까? – dgrogan

스타일 시트를 변경하는 유일한 방법은 링크를 변경하는 드롭 다운에서 선택하는 것입니다 (페이지를 새로 고쳐야 할 수도 있습니다). 내가 틀릴 수도 있지만 스토리지를 호출하는 것이 아무 것도하지 않는 것처럼 보입니다. – wazz

@dgrogan 공백으로 표시됩니다. – BenC

, 당신은 수동으로 수행하여 값을 설정 한 후 그것을 트리거해야합니다

function setStyleSource(linkID, sourceLoc) { 
    var theLink = document.getElementById(linkID); 
    theLink.href = sourceLoc; 
    console.log(theLink.href); 
} 

document.getElementById("mySelect").addEventListener("change", function() { 
    var selected = this.options[this.selectedIndex].value; 
    setStyleSource("s1", selected) 
}); 

$('.test').change(function() { 
    localStorage.setItem(this.id, this.value); 
}).val(function() { 
    return localStorage.getItem(this.id) 
}).trigger('change');

출처

2017-12-09 08:21:50 sabithpocker

제안 해 주셔서 감사합니다. 입력 내용을 추가했지만 작동하지 않는 것 같습니다. 하지만 올바르게 추가했는지 확실하지 않습니다. [링크] (http://imaginaryzebra.com/feature%20test/css_dropdown%2Blocalstorage.html) 궁극적으로, 해당 페이지를 표시하고 싶습니다. 페이지를 새로 고친 후 현재 페이지를 새로 고친 후 선택한 드롭 다운 옵션이 표시되지만 각 CSS를 사용하지는 않습니다. – BenC

로컬 저장소가있는 드롭 다운 CSS

답변

관련 문제