이미 설정된 자바 스크립트로 스타일을 바꾸는 방법은 무엇입니까?

Question

javascript를 사용하여 선택한 메뉴를 구현하고 있습니다. 예 : jsfiddle. 여기에서 div의 innerHTML 스타일을 변경하면 블록이 선택됩니다.

하지만 이미 설정된 스타일을 바꾸는 방법은 무엇입니까?

여기 내 문제는 선택할 수 없습니다 블록 1입니다.

전체 HTML 코드 :

는

<style> 
div {width:10px;height:10px;margin:10px; 
    background:#ccc;cursor:pointer;padding:10px; 
} 
</style> 
<div id="makeThatEnable" style="display:none"></div> 

<div id="one" onclick="makeThisEnable(this.id)" style="border:1px solid #00f">1</div> 
<div id="two" onclick="makeThisEnable(this.id)">2</div> 
<div id="three" onclick="makeThisEnable(this.id)">3</div> 
<div id="four" onclick="makeThisEnable(this.id)">4</div> 
<div id="five" onclick="makeThisEnable(this.id)">5</div> 
<br> 
Click on box to select it. 

<script> 
function makeThisEnable(id) { 
    document.getElementById('makeThatEnable').innerHTML="<style> #"+id+" {border:1px solid #f00}</style>"; 
} 
</script> 

Answer 1

나는 더 나은 접근 방식을 가지고 있습니다. 고유하게 그런 스타일, 간단한 증가 선언의 특이 등을 강제로 !important를 사용하는이

function makeThisEnable(id) { 
    document.getElementById('innerStyle').innerHTML="div#"+id+" {border:1px solid #f00}"; 
} 

처럼 기능을 대신 갱신이

<style id="innerStyle"> 
</style> 

같은 스타일 요소를 식별 내가 뭐하는 거지.

DEMO

Answer 2

document.getElementById('makeThatEnable').setAttribute('css', 'your prefered style'); 

Answer 3

사용의 setAttribute 방법은 같은 CSS의 말에 !important를 추가 - 두 개의 클래스 만들기>

document.getElementById('makeThatEnable').innerHTML="<style> #"+id+" {border:1px solid #f00 !important;}</style>";

Answer 4

(박스 , unboxed). 클릭하면 모든 항목을 unboxed로 설정 한 후 클릭 한 항목을 boxed로 설정합니다.

<style> 
.boxed 
    {border:1px solid #f00} 
.unboxed 
    {border:0px solid #f00} 
</style> 

<script> 
function makeThisEnable(id) { 
    var ids = new Array("one", "two", "three", "four", "five"); 
    for (var i=0; i<ids.length; i++) { 
     document.getElementById(ids[i]).setAttribute("class", "unboxed");  
    } 
    document.getElementById(id).setAttribute("class", "boxed");  
} 
</script>