在 JavaScript 中切换按钮
本教程将讨论如何使用 JavaScript 中的条件语句来切换按钮。
在 JavaScript 中使用条件语句切换按钮
我们可以使用条件语句来切换按钮，比如 JavaScript 中的 if-else 语句。我们可以在 JavaScript 中切换元素的几乎所有属性，比如它的值、类、id 和颜色。
要更改元素的任何属性，我们需要使用其 id 或类来获取元素。此外，使用属性名称，我们可以更改属性值。
例如，让我们制作一个按钮并使用 if-else 语句和 value 属性更改其内部文本。请参考下面的代码。
<!DOCTYPE html>
<html>
<head></head>
<body>
<form>
<input type="button" id="myButton" value="NO"
onclick="Buttontoggle();">
</form>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("myButton");
if(t.value=="YES"){
t.value="NO";}
else if(t.value=="NO"){
t.value="YES";}
}
</script>
</html>
在上面的程序中，我们创建了 Buttontoggle() 函数，每次用户点击按钮时都会调用该函数。它将切换按钮内的文本。
要运行此代码，你需要将此代码复制到一个 HTML 文件中并使用任何浏览器打开该文件，你将看到该按钮。以同样的方式，我们可以切换元素的任何属性。我们也可以使用 switch 语句代替 if-else 语句。现在，让我们使用按钮和 if-else 语句来切换文本。请参考下面的代码。
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Text</button>
<div id="123">Some Text</div>
</body>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
if(t.innerHTML=="Some Text"){
t.innerHTML="Toggled Text";}
else{
t.innerHTML="Some Text";}
}
</script>
</html>
在上面的代码中，我们使用了一个按钮来使用另一个元素的 id 来切换它的文本。getElementById 属性用于使用元素的 id 获取元素，而 innerHTML 属性用于获取 div 元素的文本。我们还可以使用 classList.toggle() 属性切换元素的类。
例如，让我们创建一个文本元素和一个样式表，我们将在其中设置一些类 myClass 属性，例如宽度、填充、背景颜色、颜色和字体大小。现在我们可以使用 myClass 类和 classList.toggle() 属性来切换 div 元素的类。请参考下面的代码。
<!DOCTYPE html>
<html>
<head></head>
<body>
<button onclick="Buttontoggle()">Click to Toggle Class</button>
<div id="123">Some Text</div>
</body>
<style type="text/css">
.myClass {
width: 50%;
padding: 33px;
background-color: green;
color: white;
font-size: 33px;
}
</style>
<script type="text/javascript">
function Buttontoggle()
{
var t = document.getElementById("123");
t.classList.toggle("myClass");
}
</script>
</html>
在上面的程序中，我们创建了一个用于切换类的按钮和一个将切换类的 div 元素。我们使用样式表来设置类的一些属性，当点击切换按钮时，这些属性将应用于文本。
