Search code examples
javascriptcssbackground-colormathjax

background-color doesn't work on dynamically inserted element

I'am trying to set a floating div label to specific part of MathJax equation. That's why I must insert HTML element describing label dynamically into the code, because elements in which I want to insert the code are generated in runtime.

I am able to find the part and add floating div as label, problem is that for some reason I am not able to change the background color.

I tried plenty of different ways ("Insert it in css file, have in style when element is inserted, add it later by js) and css tags ("background", "background-color"). The style appears in element message html but background color doesnt change message appearence.

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'");
  }

UPDATE:

Fiddle can be found here https://jsfiddle.net/Lqn0afxm/37/ . Message is hidden under the "x". It will appear on mouseover.

Thank you for your help.

Solution

  • your code outer div has zero height, set height for div otherwise you can also set overflow to hidden