Changing the background color of an element sets websites text to the color

Question

Im trying to make a javascript bookmark using The code I wrote. It's supposed to add an element (in this case it adds a div. The div is as large as the size of innerHeight and innerWidth. The height shrinks by a few pixels every 250 milliseconds. It works on CodePen, but when I try it on another website, it changes the entire HTML of the page to "white" (which is the background color of the added element). Here is the code:

var falseLoaderContainer = document.getElementsByTagName("html")[0];
falseLoaderContainer.innerHTML += `<div id="falseLoader"></div>`;
var falseLoader = document.getElementById("falseLoader");
falseLoader.style.position = `absolute`;
falseLoader.style.width = `${window.innerWidth}px`;
falseLoader.style.height = `${window.innerHeight}px`;
falseLoader.style.bottom = `0px`;
falseLoader.style.left = `0px`;
falseLoader.style.backgroundColor = `white`;
var falseLoaderHeight = falseLoader.style.height.replace(/px/g, "");
var updateFalseLoader = setInterval(function () {
    falseLoaderHeight *= 1;
    falseLoaderHeight -= Math.ceil(Math.random() * 4);
    falseLoader.style.height = falseLoaderHeight + "px";
    if (falseLoaderHeight <= 0) {
        clearInterval(updateFalseLoader);
    }
}, 250);

Answer 1

Try:

var element = document.getElementById("id");
element.setAttribute("style", "background-color: COLOR;");

or:

var element = document.getElementBYId("id");
element.style = "background-color: COLOR;");

Hope this helps!