3

我正在实现通过 javascript 选择的菜单。在jsfiddle中。通过更改此处 div 的 innerHTML 中的样式来选择块。

但是如何替换已经设置好的样式呢？

我的问题是我无法选择block 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

add !important at the end of CSS like -->

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

于 2012-10-03T06:06:10.857 回答
0

使用 setAttribute 方法

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

创建两个类（装箱、未装箱）。单击时，首先将所有项目设置为未装箱，然后将单击的项目设置为装箱。

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