Question

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

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

Answer 1

这是上面建议的有效版本。添加了字体大小更改，效果很好。

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>

Answer 2

我建议使用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>

如何使（单个按钮的）每次单击更改标题的内容？

2 个答案: