如何使(单个按钮的)每次单击更改标题的内容?

时间:2018-12-26 02:27:22

标签: javascript html css

我想做一个按钮,每个单击都会显示相同的单词,但大小,字体,粗细等都不同。

例如,例如:我有一个词“ 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也不太满意,至少目前为止... 如果有人可以帮助我,我将非常感激。 预先谢谢你。

2 个答案:

答案 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>