3

私は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>
4

4 に答える 4

3

私にはもっと良いアプローチがあります。 このようなスタイル要素を一意に識別します

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

次に、このように関数を更新します

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

!importantスタイルを強制するために使用する代わりに、私が行っているように宣言の特異性を単純に高めます。

デモ

于 2012-10-03T06:24:41.797 に答える
1

!importantCSSの最後に->のように追加します

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

于 2012-10-03T06:06:10.857 に答える
0

2つのクラス（ボックス化、ボックス化解除）を作成します。クリックしたら、最初にすべてのアイテムをボックス化解除に設定し、次にクリックしたアイテムをボックス化に設定します。

<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-03T06:15:59.097 に答える
0

setAttributeメソッドを使用する

document.getElementById('makeThatEnable').setAttribute('css', 'your prefered style');
于 2012-10-03T06:04:42.190 に答える