切换更改css选择器

Question

我试图不改变一个段落的id属性的按钮点击。第一部分起作用。但是当按钮再次被点击时，应该恢复到原来的样式。新的与JavaScript，所以任何其他有帮助的文章将是很好的。

下面是css：

    <style type="text/css">
    #attention
    {
        font-size:24px;
        background-color:yellow;
        width:300px;
    }
    #normal
    {
        background-color:white;
        font-size:12px;
    }
</style>

JS

        function changeText() {
        var text = document.getElementById("textChange");
        text.innerHTML = "New Text";
        text.id = "attention";
    }

HTML

    <div>
    <p id="textChange">Some generic text here</p>
    <input id="Button1" type="button" value="Do Something" onclick="changeText();" />
</div>

Answer 1

• 首先，不要更改元素的ID。
• 切换一个类。
• 不要使用内联事件属性。而是使用DOM3侦听器。

CSS

<style type="text/css">
    .attention
    {
        font-size:24px;
        background-color:yellow;
        width:300px;
    }
    .normal
    {
        background-color:white;
        font-size:12px;
    }
</style>

 <div>
    <p id="textChange">Some generic text here</p>
    <input id="Button1" type="button" value="Do Something" />
</div>

JS

var btn = document.getElementById('Button1');

btn.addEventListener('click', function() {
   var div = document.getElementById('textChange');

   div.className = 'attention';
});

Answer 2

您应该为这类功能使用类。例如：

function changeText() {
    var text = document.getElementById("textChange");
    text.innerHTML = "New Text";
    text.className = text.className == "attention" ? 'normal' : 'attention';
}

因此CSS变成：

.attention {
    font-size:24px;
    background-color:yellow;
    width:300px;
}
.normal {
    background-color:white;
    font-size:12px;
}

演示：http://jsfiddle.net/5yx44/