如何用已設置的javascript替換樣式？

我正在實現由javascript幫助選擇的菜單。在jsfiddle。通過在此處更改div的innerHTML中的樣式來選擇塊。如何用已設置的javascript替換樣式？

但是如何替換已經設置的樣式？

這裏我的問題是我不能選擇塊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>

來源

2012-10-03 vusan

我有一個更好的方法。 唯一標識這樣

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

樣式元素則不用更新使用!important給力的風格，簡單的增加申報的特異性喜歡你的函數類似這樣的

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

我在做。

DEMO

來源

2012-10-03 06:24:41 Starx

@vusan，特地使用這種方式。它不使用DOM中存在的額外容器'div'，但不顯示它自己。此外，應儘可能地避免使用「重要」。 – Starx

使用的setAttribute方法

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

來源

2012-10-03 06:04:42

我不想將樣式設置爲該ID。請告訴我，這是CSS是一個屬性？ – vusan

在像CSS的末尾添加!important - >

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

來源

2012-10-03 06:06:10 rt2800

@vusan，比使用'！important'有更好的方法。檢查我的答案。 – Starx

創建兩個類（盒裝，拆箱）。點擊後，首先將所有項目設置爲取消裝箱，然後將點擊的項目設置爲裝箱。

<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>

來源

2012-10-03 06:15:59

如何用已設置的javascript替換樣式？

回答

相關問題