使用onclick通过按钮创建文本时，用onmouseover突出显示文本

问题描述

我在用户输入姓名后生成文本

我希望能够突出显示entername（）函数的输出。我能够突出显示文本，但不确定如何在指定的输出中显示文本？

function entername() {
  var user = document.getElementById("username").value;
  document.body.append("Hey " + user);
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

<main>

  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">
            Greet
        </button>


  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content" onmouseover="entername"> </p

</main>

解决方法

这对您有帮助吗？

function entername() {
  var user = document.getElementById("username").value;
  document.querySelector('#content').innerText = "Hey " + user;
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

<main>
  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">Greet</button>
  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content"> </p>
</main>

,

你是这个意思吗？

function entername() {
  var user = document.getElementById("username").value;
  document.getElementById('content').innerHTML = 'Hey ' + user;
}

function overgreeting() {
  document.getElementById("content").style.backgroundColor = "green";
}

#content {
  background-color: yellow
}

<main>

  <input type="string" name="name" id="username">
  <button title="Greet" onclick="entername()">
            Greet
        </button>


  <button onmouseover="overgreeting()"> Test Button </button>
  <p id="content" onmouseover="entername()"> </p>
</main>

,

将您要创建的文本放入<div>标记中并以其自己的ID突出显示。然后从您的JavaScript代码中按ID引用div元素，并将背景色直接应用于div元素。根据结果​​，您可能希望div标签包装内容。

您还可以在CSS中定义div背景颜色，并使用按钮管理div元素的消失和重新出现。