배경을 변경하는 3 개의 버튼이있는 페이지를 만들려고합니다. 나는 이것을 이론적으로 어떻게하는지 압니다. 나는 배경색을 변경하는 방법을 만들려고 노력했으나 색상을 변경할 때마다 새 스타일 요소가 이전 요소와 겹치기 때문에 이전 요소를 삭제할 수있는 방법을 찾고 있습니다. 새로운 것이 생성되었지만 아직 찾지 못했습니다. <style> 요소를 JS로 새로 추가 할 때 삭제
이
var backgroundColor = {
red: function backgroundRed() {
var sheet = document.createElement('style');
sheet.setAttribute('id', 'redBG');
sheet.innerHTML = "body {background-color: red;}";
document.body.appendChild(sheet);
},
blue: function backgroundBlue() {
var sheet = document.createElement('style');
sheet.setAttribute('id', 'blueBG');
sheet.innerHTML = "body {background-color: blue;}";
document.body.appendChild(sheet);
},
green: function backgroundGreen() {
var sheet = document.createElement('style');
sheet.setAttribute('id', 'greenBG');
sheet.innerHTML = "body {background-color: limegreen;}";
document.body.appendChild(sheet);
},
deletePrevious: function() {
// ???
},
};
var applyColor = {
applyRed: function() {
//a method that when applying a new background color deletes the previous one
backgroundColor.red();
},
applyBlue: function() {
backgroundColor.blue();
},
applyGreen: function() {
backgroundColor.green();
}
}
이전 요소를 삭제하는 방법을 어떻게 만들 수 있습니까? div 안에 요소를 중첩시켜야합니까?
편집 : 나는이 것을 지나치게 경계하고있다. 나는 지금 약 2 개월 동안 JS를 배우고있다, 아직도 갈 길이 멀다. Andrew Lohr의 의견은 내가 만든 모든 backgroundColor 함수를 효과적으로 대체합니다. 나는 또한 그의 의견을 upvote 수있는 방법을 찾지 못했습니다 그래서 StackOverflow 새로운 있어요. DOM을 더 잘 알고 수정할 수있는 더 쉬운 방법을 알아야합니다.
귀하의 답변과 도움에 감사드립니다.
난 당신이 생각 이상있을 생각을 바꿀 수 있습니다 : 그런 다음 추가 할 때마다/CSS의 사용을 대체 이. 당신은 각 단추 누르기에 다만 몸의 색깔을 바꾸는 것을 시도 했는가? 예를 들어'document.body.style.backgroundColor = "red"' –
이것을하기 위해 수업을 토글하는 것으로 생각 해보았습니까? 또한 반복적 인 코드를 많이 사용합니다. – charlietfl