我想做一个按钮,每个单击都会显示相同的单词,但大小,字体,粗细等都不同。
例如,例如:我有一个词“ become”,通常用Helvetica字体和下面的按钮书写。当我单击该按钮时,单词应更改为“成为”,但以大写和粗体显示。然后,我将再次单击它,它将变成单词“ become”,但小写并带有一行,依此类推...
在我的HTML中,我有:
<div id="container2">
<h4 id="original">Become</h4>
</div>
<h2 id="button">Transform me!</h2>
在我的CSS中,我有:
@font-face {
font-family: Helvetica;
src: url(Helvetica CE Regular.ttf);
}
h4{
font-family: helvetica;
margin:0 auto;
text-align:center;
width:350px;
margin-top: 7%;
}
#button{
font-family: helvetica;
font-size: 25px;
background-color: inherit;
width: 165px;
margin: 0 auto;
margin-top: 3.5%;
padding: 0.5%;
position: static;
}
#button:hover {
text-decoration: underline;
}
#original{
font-size: 90px;
font-weight: bold;
text-transform: uppercase;
}
在我的Javescript中,现在有这个:
var botao
var original = document.getElementById('original');
botao = document.getElementById("button");
botao.onclick = function () {
original.style.cssText = 'font-style:oblique'; 'text-transform: lowercase';
}
我在网上找不到解决该问题的答案...我对Java也不太满意,至少目前为止... 如果有人可以帮助我,我将非常感激。 预先谢谢你。
答案 0 :(得分:3)
这是上面建议的有效版本。 添加了字体大小更改,效果很好。
const classes = ["class1", "class2", "class3"];
var selectedIndex = 0;
document.getElementById("button").addEventListener("click", function(){
if(++selectedIndex >= classes.length) selectedIndex = 0;
document.getElementById("original").className = classes[selectedIndex];
});
.class1 {
color: red;
font-size: 1.25em;
}
.class2 {
color: blue;
font-size: 1.75em;
}
.class {
color: green;
font-size: 2.5em;
}
<div id="container2">
<h4 id="original" clasx="class1">Become</h4>
</div>
<h2 id="button">Transform me!</h2>
答案 1 :(得分:1)
我建议使用jQuery来做到这一点。对初学者来说更友好。
您只需要在页面中包含jQuery CDN链接,然后就可以使用jQuery($)函数。使用类很有意义。查看代码。
$('.transformer').click(function(){
if ($(this).siblings('h4').hasClass('original')) {
$(this).siblings('h4').addClass('uppercase-bold');
$(this).siblings('h4').removeClass('original');
}
else if($(this).siblings('h4').hasClass('uppercase-bold')){
$(this).siblings('h4').addClass('italic');
$(this).siblings('h4').removeClass('uppercase-bold');
}
else if($(this).siblings('h4').hasClass('italic')){
$(this).siblings('h4').addClass('original');
$(this).siblings('h4').removeClass('italic');
}
});
.wrapper {
border: 1px solid blue;
padding: 10px;
margin-bottom: 10px;
}
h4 {
text-transform: lowercase;
}
.uppercase-bold {
text-transform: uppercase;
font-weight: bold;
color: blue;
}
.italic {
font-style: italic;
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<h4 class="original">Become</h4>
<button class="transformer">transform me!</button>
</div>
<div class="wrapper">
<h4 class="original">To be, or not to be?</h4>
<button class="transformer">transform me!</button>
</div>