如何使用jQuery为div元素设置CSS样式？

问题根源 #

你动态加载jQuery的方式是异步的，当代码执行到$(function(){...})时，jQuery还没加载完成，$变量尚未定义，导致这部分代码直接报错，样式设置逻辑根本没执行，所以Div元素存在但没有样式。

解决方案1：确保jQuery加载完成后再执行代码 #

给动态创建的script标签添加onload事件，在jQuery加载完成后再执行样式设置逻辑：

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

// 监听脚本加载完成事件
s.onload = function() {
  let background = document.createElement("div");
  background.id = "rwBackground";
  document.body.appendChild(background);

  let enabled = false;

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

document.head.appendChild(s);

解决方案2：使用原生JS替代jQuery（更简洁） #

如果只是设置样式，完全可以不用依赖jQuery，直接用原生JS实现，避免异步加载的问题：

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

// 用原生JS批量设置样式
Object.assign(background.style, {
  backgroundColor: "#111",
  position: "fixed",
  height: `${document.body.innerHeight}px`,
  width: `${document.body.innerWidth}px`,
  top: "0px",
  left: "0px",
  filter: "blur(100px)"
});

document.body.appendChild(background);
let enabled = false;

内容的提问来源于stack exchange，提问作者KAHMRON CUTLIP