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

您应该使用类来实现此类功能。例如：

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/

Answer 2

首先不要更改元素的ID。
改为翻转课程。
不要使用内联事件属性。改为使用DOM3监听器。

<强> CSS

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

<强> HTML

 <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';
});

切换更改css选择器

2 个答案:

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