DEV Community

Discussion on: DML and CSS in JS

Collapse
 
efpage profile image
Eckehard

Lovely!

as you use mouseover and mouseout, there is no need to use a class. You are able to apply the attributes directly to the DOM elements:

  <script>
    function Menu(list) {
      let menu = ul(list, "border: 2px solid pink; width: 200px; margin: 5px; padding: 0; list-style-type: none;");
      for (let el of menu.childNodes) {
        el.onmouseover = (e) => {setAttributes(e.srcElement, "background: deeppink;color: white;cursor: pointer;") };
        el.onmouseout = (e) => { setAttributes(e.srcElement, "background: white;color: black;cursor: pointer;") };
      }
      return menu;
    }

    h1("DML & Bss (css in JS)", "text-align:center")

    Menu(["item1", "item2", "item3"])

    Menu(["item11", "item22", "item33", "item44"])

  </script>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
artydev profile image
artydev

Ok, thank you Eckehard :-)