2017-12-03 5 views
0

배경을 변경하는 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(); 
 
       } 
 
      }

는 지금까지 작성한 코드입니다. 문제는 실행했을 때 일어나는 일입니다. Overlapping elements

이전 요소를 삭제하는 방법을 어떻게 만들 수 있습니까? div 안에 요소를 중첩시켜야합니까?

편집 : 나는이 것을 지나치게 경계하고있다. 나는 지금 약 2 개월 동안 JS를 배우고있다, 아직도 갈 길이 멀다. Andrew Lohr의 의견은 내가 만든 모든 backgroundColor 함수를 효과적으로 대체합니다. 나는 또한 그의 의견을 upvote 수있는 방법을 찾지 못했습니다 그래서 StackOverflow 새로운 있어요. DOM을 더 잘 알고 수정할 수있는 더 쉬운 방법을 알아야합니다.

귀하의 답변과 도움에 감사드립니다.

+1

난 당신이 생각 이상있을 생각을 바꿀 수 있습니다 : 그런 다음 추가 할 때마다/CSS의 사용을 대체 이. 당신은 각 단추 누르기에 다만 몸의 색깔을 바꾸는 것을 시도 했는가? 예를 들어'document.body.style.backgroundColor = "red"' –

+0

이것을하기 위해 수업을 토글하는 것으로 생각 해보았습니까? 또한 반복적 인 코드를 많이 사용합니다. – charlietfl

답변

0

전체 CSS를 변경하는 대신 <style> 태그는 전체 테마를 설정하는 class` 속성의 값을 설정하고 모든 CSS는 해당 테마를 기반으로합니다.

또는

body.theme-red { 
 
    background-color: red; 
 
} 
 

 
body.theme-blue { 
 
    background-color: blue; 
 
} 
 

 
body.theme-green { 
 
    background-color: green; 
 
} 
 

 

 
.theme-red h1 { 
 
    color: black 
 
} 
 

 
.theme-blue h1 { 
 
    color: yellow; 
 
} 
 

 
.theme-green h1 { 
 
    color: red; 
 
}

, 세 개의 파일로 CSS를 파괴에만 테마를 기반으로 올바른 하나를로드합니다.

또는 CSS를 세 파일로 분리하고 Alternate Style Sheets을 사용하십시오.

1

JS에 익숙한 것 같습니다. 예제가 필요한 경우 알려주세요.

'themeCSS'로 스타일 태그를 만드십시오.

themeCSS.innerHTML = "so { and: so; }"; 

그 방법, 그것은 항상 이전 CSS : 당신은 몇 가지 요구 사항이없는 한