Javascript 如何使每次点击（单个按钮）使标题内容发生变化？

我想做一个按钮，它的每一次点击都会显示相同的单词，但大小、字体、权重等都不同

比如，我有一个单词“变成”，通常是用Helvetica字体写的，下面有一个按钮。当我点击按钮时，单词应该改为“变成”，但大写和粗体。然后，我会再次点击它，它会变成单词“变成”，但用小写字母，并有一行通过它，依此类推

在我的HTML中，我有：

<div id="container2">
<h4 id="original">Become</h4>
</div>

<h2 id="button">Transform me!</h2>

在我的标枪中，我现在有这样一句话：

var botao
var original = document.getElementById('original');

botao = document.getElementById("button");

botao.onclick = function () {
original.style.cssText = 'font-style:oblique'; 'text-transform: lowercase';
}

我在网上找不到解决这个问题的答案。。。我对java也不是很熟悉，至少现在。。。 如果有人能帮助我，我将非常感激。

---

提前谢谢。

这里是上述建议的工作版本。 添加了字体大小更改，效果良好

const classes=[“class1”、“class2”、“class3”]；
var selectedIndex=0；
document.getElementById（“按钮”）.addEventListener（“单击”，函数）（）{
如果（++selectedIndex>=classes.length）selectedIndex=0；
document.getElementById（“原始”）.className=classes[selectedIndex]；
});
.class1{
颜色：红色；
字号：1.25em；
}
.2级{
颜色：蓝色；
字号：1.75em；
}
.类{
颜色：绿色；
字号：2.5em；
}

成为
改变我这是上述建议的工作版本。
添加了字体大小更改，效果良好


const classes=[“class1”、“class2”、“class3”]；
var selectedIndex=0；
document.getElementById（“按钮”）.addEventListener（“单击”，函数）（）{
如果（++selectedIndex>=classes.length）selectedIndex=0；
document.getElementById（“原始”）.className=classes[selectedIndex]；
});
.class1{
颜色：红色；
字号：1.25em；
}
.2级{
颜色：蓝色；
字号：1.75em；
}
.类{
颜色：绿色；
字号：2.5em；
}

成为
改变我我建议使用jQuery来实现这一点。它对初学者更友好

您只需要在页面中包含jQuery CDN链接，然后就可以使用jQuery（$）函数。使用类是有意义的。请参阅代码


$（'.transformer'）。单击（函数（）{
if（$（this）.sibbines（'h4'）.hasClass（'original'））{
$（this）.this（'h4'）.addClass（'uppercase-bold'）；
$（this）.this（'h4'）.removeClass（'original'）；
}
else if（$（this）.sibbines（'h4'）.hasClass（'uppercase-bold'））{
$（this）.this（'h4'）.addClass（'italic'）；
$（this）.this（'h4'）.removeClass（'uppercase-bold'）；
}
else if（$（this）.sibbines（'h4'）.hasClass（'italic'））{
$（this）.this（'h4'）.addClass（'original'）；
$（this）.this（'h4'）.removeClass（'italic'）；
}    
});
.wrapper{
边框：1px纯蓝色；
填充：10px；
边缘底部：10px；
}
h4{
文本转换：小写；
}
.大写粗体{
文本转换：大写；
字体大小：粗体；
颜色：蓝色；
}
.斜体{
字体：斜体；
颜色：红色；
}

成为
改变我！
生存还是毁灭？
改变我！
我建议使用jQuery来实现这一点。它对初学者更友好

您只需要在页面中包含jQuery CDN链接，然后就可以使用jQuery（$）函数。使用类是有意义的。请参阅代码


$（'.transformer'）。单击（函数（）{
if（$（this）.sibbines（'h4'）.hasClass（'original'））{
$（this）.this（'h4'）.addClass（'uppercase-bold'）；
$（this）.this（'h4'）.removeClass（'original'）；
}
else if（$（this）.sibbines（'h4'）.hasClass（'uppercase-bold'））{
$（this）.this（'h4'）.addClass（'italic'）；
$（this）.this（'h4'）.removeClass（'uppercase-bold'）；
}
else if（$（this）.sibbines（'h4'）.hasClass（'italic'））{
$（this）.this（'h4'）.addClass（'original'）；
$（this）.this（'h4'）.removeClass（'italic'）；
}    
});
.wrapper{
边框：1px纯蓝色；
填充：10px；
边缘底部：10px；
}
h4{
文本转换：小写；
}
.大写粗体{
文本转换：大写；
字体大小：粗体；
颜色：蓝色；
}
.斜体{
字体：斜体；
颜色：红色；
}

成为
改变我！
生存还是毁灭？
改变我！
建议您设置一些CSS类。将这些存储在
数组中
，然后单击一次循环。每次单击时更改元素类名称。有意义吗？那么您是否希望
css
属性从一组样式切换到另一组样式，或者从两组以上的样式进行更改？您可以切换一个
类
名称，但如果您想从两个以上的预设属性进行切换，则无疑需要不同的方法。Paul，是的，这是有意义的。我只是不知道我能不能成功，啊哈。尽管如此，我还是会尝试。但首先，我需要创建不同的css类，这些类包含我希望每个版本的单词的样式，对吗？它们只存在于css文件中，对吗？根据你所说的，我假设它们只会写在我的css文件上，而不会应用在我的html上。我错了吗？建议你设置一些CSS类。将这些存储在
数组中
，然后单击一次循环。每次单击时更改元素类名称。有意义吗？那么您是否希望
css
属性从一组样式切换到另一组样式，或者从两组以上的样式进行更改？您可以切换一个
类
名称，但如果您想从两个以上的预设属性进行切换，则无疑需要不同的方法。Paul，是的，这是有意义的。我只是不知道我能不能成功，啊哈。尽管如此，我还是会努力的。但是
var botao
var original = document.getElementById('original');

botao = document.getElementById("button");

botao.onclick = function () {
original.style.cssText = 'font-style:oblique'; 'text-transform: lowercase';
}