Question

我有一个onclick方法，该方法将文本样式设置为“粗体”，如果第二次单击，则需要将其恢复为正常。我怎样才能做到这一点？

<button onclick="boldText()">B</button>

function boldText() {
    document.getElementById('txt-area').style.fontWeight = 'bold';
}

Answer 1

setBold函数检查元素fontWeight是否为bold，然后将其设置为bold，反之亦然

function setBold() {
    var element= document.getElementById('txt-area');
    
    if (element.style.fontWeight == 'bold') {
        element.style.fontWeight = 'normal';
    } else {
        element.style.fontWeight = 'bold';
    }
}

<button onclick="setBold()">Toggle font Weight</button>
<p id='txt-area'>Test Text</p>

Answer 2

设置一个变量，然后单击将其增加1。您可以执行以下操作：

let numOfClicks = 0;

function boldText() {
  numOfClicks++;
  document.getElementById('txt-area').style.fontWeight = 'bold';
  if (numOfClicks >= 2 ) {
    document.getElementById('txt-area').style.fontWeight = 'normal';
  }

}

<button onclick="boldText()">B</button>
<p id='txt-area'>This is the text area</p>

Answer 3

尝试一下：

var clickNum = 0;
      function boldText() {
        if(clickNum == 0){
          document.getElementById('txt-area').style.fontWeight = 'bold';
          clickNum++;
        } else {
          document.getElementById('txt-area').style.fontWeight = '';
          clickNum--;
        }
      }

Answer 4

此标志标记变量的最常用解决方案，该变量值区分按钮的单击事件。我们将标志变量nClicks设置为初始设置为零。当点击事件发生时，其值增加1（如果不想使用++增量运算符，也可以将其设置为1），如果满足条件，则将其设置为零。

let nClicks = 0;

function boldText() {
  nClicks++;
  document.getElementById('txt-area').style.fontWeight = 'bold';
  if (nClicks > 1 ) {
    document.getElementById('txt-area').style.fontWeight = 'normal';
nClicks=0;
  }

}

<button onclick="boldText()">B</button>
<p id='txt-area'>your stuff</p>

如何在“ onclick”方法之前返回状态？

4 个答案: