이 코드를 사용하여 머리와 단추 색상을 변경하려고합니다.
<div class="ann-right">
<button id="red" onclick="color1('#D91E18'), color2('#96281B')" class="tooltip color" title="Red"></button>
<button id="green" onclick="color1('#3FC380'), color2('#00B16A')" class="tooltip color"title="Green" ></button>
<button id="blue" onclick="color1('#5BBBFF'), color2('#22A7F0')" class="tooltip color" title="Blue"></button>
</div>
<script>
function color1(col){
document.getElementById("head").style.backgroundColor=col;
}
function color2(col){
document.getElementById("submit-search").style.backgroundColor=col;
document.getElementById("submit-post").style.backgroundColor=col;
}
</script>
페이지를 새로 고친 후 색상을 유지하는 방법은 무엇입니까?
필요한 동작을 구현하기위한 여러 옵션이 있으며 그중 하나는 sessionStorage를 사용하는 것입니다. sessionStorgae에 선택한 색상을 저장하고 페이지로드시 읽습니다. 자세한 내용은 다음을 참조하십시오.
// Save data to sessionStorage
sessionStorage.setItem('key', 'value');
// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');
// Remove saved data from sessionStorage
sessionStorage.removeItem('key');
// Remove all saved data from sessionStorage
sessionStorage.clear();
업데이트 : 귀하의 경우 :
<div class="ann-right">
<button id="red" onclick="color1('#D91E18'), color2('#96281B')" class="tooltip color" title="Red"></button>
<button id="green" onclick="color1('#3FC380'), color2('#00B16A')" class="tooltip color" title="Green"></button>
<button id="blue" onclick="color1('#5BBBFF'), color2('#22A7F0')" class="tooltip color" title="Blue"></button>
</div>
<script>
function color1(col) {
document.getElementById("head").style.backgroundColor = col;
sessionStorage.setItem('col1', col);
}
function color2(col) {
document.getElementById("submit-search").style.backgroundColor = col;
document.getElementById("submit-post").style.backgroundColor = col;
sessionStorage.setItem('col2', col);
}
color1(sessionStorage.getItem('col1'));
color2(sessionStorage.getItem('col2'));
</script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다