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

我有更好的方法。 唯一标识这样的样式元素

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

然后像这样更新您的功能

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

不是使用 !important 来强制使用样式，而是像我一样简单地增加声明的特异性。

DEMO

Answer 2

在CSS末尾添加!important，例如 - ＆gt;

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

Answer 3

使用setAttribute方法

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

Answer 4

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

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

如何用已设置的javascript替换样式？

4 个答案: