如何用JavaScript中的按钮单击来更改css类？

我很困惑我在做什么错在这里我跟着一个教程，它适用于他们，但不是我。我已经切换了很多东西来试图找到问题，但它似乎并不奏效。如何用JavaScript中的按钮单击来更改css类？

HTML

<h1 class="settingOne" id="mainText">Simple HTML Page</h1> 
    <p class="center"> 
     This is a very simple HTML page. 
    </p> 

    <p class="center">It's about as basic as they come. It has: </p> 

    <ul class="center"> 
     <li>An H1 Tag</li> 
     <li>Two paragraphs</li> 
     <li>An unordered list</li> 
    </ul> 

    <button id="changeButton"> 
     <p> 
      Hey push this to change the header thing 
     </p> 
    </button>

CSS

.settingOne { 
    font-family: fantasy; 
    color: blue; 
    text-align: center; 
} 

.settingTwo { 
    font-family: serif; 
    color: red; 
    text-align: center; 
}

JAVASCRIPT

function changeClass() { 
    document.getElementById("changeButton").onclick = function() { 
     if (document.getElementById("mainText").className === "settingOne") { 
      document.getElementById("mainText").className = "settingTwo"; 
     } else { 
      document.getElementById("mainText").className === "settingOne"; 
     } 
    }; 
} 

window.onload = function() { 
    preparePage(); 
}

;

来源

2016-02-22 cosmichero2025

你是不是要求您onload处理中的函数调用 –

changeClass（）。（什么是从onload调用但未显示的preparePage（）。） – nnnnnn

'document.getElementById（“mainText”）。className ===“settingOne”;' 您应该为此行分配值，其他声明，而不是检查 –

目前尚不清楚，如果你changeClass功能是不断调用。我提供了一个示例，通过将第一个查询存储到变量ele中的元素changeButton，然后在发生window.onload事件时注册点击处理程序，从而清理您的代码。您当然可以将其全部包装在另一个名为registerHandlers的函数中，或者将其放入您的preparePage函数中。

window.onload = function() { 
    var ele = document.getElementById("changeButton"); 
    ele.onclick = function() { 
     if(ele.className === "settingOne") { 
      ele.className = "settingTwo"; 
     } else { 
      ele.className = "settingOne"; 
     } 
    }; 
};

来源

2016-02-22 00:45:31 ThisClark

当我使用它改变了触发onClick的东西的文本，但我添加了另一个变量，连接到h1标签我想改变移动了一些东西，并在那里兴旺起来。谢谢：D和Sry有关这个问题不是描述性的我仍然习惯堆栈溢出和JavaScript。 – cosmichero2025

在JavaScript中，线

else { document.getElementById("mainText").className === "settingOne"; }

应改为

else { document.getElementById("mainText").className = "settingOne"; }

单=用来设置一两件事等于另一个，这是你想要在这里的行为。

工作例如：https://jsfiddle.net/w6no44v1/20/

来源

2016-02-22 00:37:39 hxlnt

我做了你说的和你的权利这是错误的....不知道我是如何错过了。它没有解决问题，虽然上面的评论中有人告诉我调用changeClass函数但不知道从哪里来，但我是新手，所以我只是在测试水域。哦，我摆脱了preparePage（） – cosmichero2025

只需添加一个带有示例代码的JSFiddle链接给你！让我知道这是否有帮助。 :) – hxlnt

还请务必记下你的Javascript放置在哪里 - 它在你的HTML文件的或结尾？你没有在你的问题中指定，但这个例子的位置确实很重要。（在我的JSFiddle示例中，它在本体中。）快乐编码！ – hxlnt

如何用JavaScript中的按钮单击来更改css类？

回答

相关问题