在 CSS 或 Javascript 本身中设置 Javascript 文本元素的样式

Question

我已将 Javascript 文本元素放入 HTML div 字段中，现在我希望文本颜色为白色。我还想对文本进行一些其他更改。现在我想知道如何设置文本元素的样式或者它是否可以这种形式是可能的。

(翻译成Google翻译，可能有错误)

这是我的 javascript 代码：

var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);

function bghtooltipinmouseOver() {
  bghtooltipout.innerHTML = 'Go to Login';
}

function bghtooltipoutmouseOut() {
  bghtooltipout.innerHTML = ' ';
}

Answer 1

您似乎想在用户将鼠标悬停在按钮上时更改文本颜色。 CSS 有一个涵盖此用例的伪 class class。看看https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

Answer 2

有两种方法，要么使用css类要么直接style操作

var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);

function bghtooltipinmouseOver() {
  bghtooltipout.innerHTML = 'Go to Login';
  bghtooltipin.style.color = "white";
}

function bghtooltipoutmouseOut() {
  bghtooltipout.innerHTML = ' ';
  bghtooltipin.style.color = "black";
}

<div id="bgh-tooltipin1">Test 1</div>
<div id="bgh-tooltipout1"></div>

Answer 3

谢谢@Józef Podlecki 现在我想在我的文本中添加一个小的过渡，以便文本悬停后大约 6 毫秒。那将是我对文本的第二次更改。

因为我没有使用经典样式元素来管理它。

在 CSS 或 Javascript 本身中设置 Javascript 文本元素的样式

Style Javascript Textelement in CSS or Javascript itself

html

javascript

css

text

element