时间戳

首页 > 解决方案 > 背景颜色不适用于动态插入的元素

javascript - 背景颜色不适用于动态插入的元素

问题描述

我正在尝试将浮动 div 标签设置为 MathJax 方程的特定部分。这就是为什么我必须在代码中动态插入描述标签的 HTML 元素，因为我想要插入代码的元素是在运行时生成的。

我能够找到该部分并将浮动 div 添加为标签，问题是由于某种原因我无法更改背景颜色。

我尝试了很多不同的方法（“将其插入css文件，插入元素时具有样式，稍后通过js添加）和css标签（“背景”，“背景颜色”）。样式出现在元素 消息html中 但背景颜色不会改变 消息外观。

let els = document.getElementById("id").getElementsByClassName("mjx-mstyle")
for(let i = 0; i < els.length; i++){
  if(window.getComputedStyle(els[i]).color.indexOf("rgb(206, 15, 33)") >= 0 ){
    (els[i]).setAttribute("style", "color: rgb(206, 15, 33); background-color: navy; position: relative");
    (els[i]).innerHTML += 
    '<div id="message1" style="position: absolute; top: -10px; width: 100px; color: black; background-color: black">This is my text</div>' -;
    (els[i]).setAttribute("onmouseover", "document.getElementById('message1').style.display = 'block'");
    (els[i]).setAttribute("onmouseout", "document.getElementById('message1').style.display = 'none'");
  }

更新：

小提琴可以在这里找到https://jsfiddle.net/Lqn0afxm/37/。消息隐藏在“x”下。它会出现在鼠标悬停上。

谢谢您的帮助。

标签： javascriptcssbackground-colormathjax

解决方案

您的代码外部 div 的高度为零，为 div 设置高度，否则您也可以将溢出设置为隐藏

推荐阅读