How do I set css styles on my div with JQuery?

Question

I'm trying to create a div that is colorized.

let s = document.createElement("script");
s.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js";

document.head.appendChild(s);

let background = document.createElement("div");
background.id = "rwBackground";
document.body.appendChild(background);

let enabled = false;

$(function(){
  $("#rwBackground").css({
    "background-color": "#111",
    position: "fixed",
    height: document.body.innerHeight + "px",
    width: document.body.innerWidth + "px",
    top: "0px",
    left: "0px",
    filter: "blur(100px)"
  });
});

I tried putting "" outside of the CSS styles, but it doesn't seem to work.

I would check the body, and I can see it in there, but it has no styles.

If anyone could help me on this, it'd be greatly appreciated!

You're trying to use jQuery before it has loaded. There's most likely an error in your console about `$` not being defined (or similar) — Phil, Mar 14 '23 at 23:20

score 1 · Accepted Answer · answered Mar 14 '23 at 23:27

You're trying to use jQuery before it has loaded.

You could use the techniques in this answer or you could move with the times and avoid jQuery entirely

const background = document.createElement("div");
background.id = "rwBackground";

Object.assign(background.style, {
  backgroundColor: "#111",
  position: "fixed",
  height: "100%", // document.body.innerHeight + "px",
  width: "100%", // document.body.innerWidth + "px",
  top: "0px",
  left: "0px",
  filter: "blur(100px)"
});

document.body.appendChild(background);

FYI innerHeight and innerWidth are not properties of HTMLBodyElement

How do I set css styles on my div with JQuery?

1 Answers1