Question

我需要创建一个按钮，其中一个按钮用于将文本区域中的文本设置为粗体，并将其取消设置为之前的状态。这应该是相同的按钮。

＆＃13;

function toggleBold() {
  var bold = true
  if (bold = ture) {
    document.getElementById("entertext").
  }
}

＆＃13;

<button onclick="toggleBold">BOLD</button>


<form>
  Enter Text:
  <br>
  <input type="text" name="your text" id="entertext">
</form>

＆＃13;

Answer 1

您可以使用Jquery

来完成

表格

<button class="toggleBold">BOLD</button>
<form>
  Enter Text:
  <br>
  <input type="text" name="your text" id="entertext">
</form>

Jquery的

$(".toggleBold").click(function() {
   document.getElementById("entertext").classList.toggle("bold");
});

Css

 .bold { font-weight: bold; }

Answer 2

您可以通过设置粗体类，然后在文本元素上切换该类来完成此操作。

此外，您不应使用HTML事件属性将DOM对象绑定到事件处理程序，因为：

他们创建的意大利面条代码更难以阅读并导致代码重复。
他们在您提供的函数周围添加全局包装函数更改事件处理函数中的this绑定。
他们不遵循 W3C DOM Event 标准。

您应该在JavaScript中执行所有事件绑定，并使用 .addEventListener() 。

// Get DOM element references
var btn = document.getElementById("btnToggleBold");
var txt = document.getElementById("txtInput");

// Wire the button's click event up to a toggle function
btn.addEventListener("click", function(){
  // Toggle the bold class on the text element
  txt.classList.toggle("bold");
});

/* This class will be toggled via a button click */
.bold {font-weight:bold; }

<form>
  <div>
    <button id="btnToggleBold">BOLD</button>
  </div>
  <div>
    Enter Text:
    <br>
    <input type="text" name="txtInput" id="txtInput">
  </div>
</form>

javascript按钮将字体从粗体切换为原始

2 个答案: