如何使用 jQuery 在 body::before 中设置背景图像答案

【问题标题】：How to set background-image in body::before with jQuery如何使用 jQuery 在 body::before 中设置背景图像
【发布时间】：2019-06-23 14:53:13
【问题描述】：

我的网页上有一个样式，它使用 body::before 来设置图像。我想在页面加载后用 jQuery 更改此图像。我试过做这样的事情，但没有成功。

$('body::before').css('background-image','image.jpg')

这是我的简单html：

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script src="lib/jquery.min.js" type="application/javascript"></script>
    <title>x</title>
    <style>
      body::before {
        content: "";
        background-image: url("http://peterkellner.net/wp/wp/wp-content/uploads/2018/05/cropped-peterkellnernet-300x60.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        display: inline;
      }
    </style>
  </head>
  <body>
    <script src="_test.js" type="application/javascript"></script>
  </body>
</html>

【问题讨论】：

您不能使用 DOM API 访问伪元素。
可以删除重新添加吗？
很遗憾没有，因为它们不在文档树中。
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery的可能重复

标签： jquery css-selectors

【解决方案1】：

您可以做什么而不是尝试设置伪元素的样式（无法通过 DOM API 访问，也无法使用内联样式设置样式），您可以简单地使用 ::before 元素及其样式创建一个新类.然后您可以简单地将该类添加到body 元素。 示例：

.loadedBody::before {
        content: "";
        background-image: url("http://peterkellner.net/wp/wp/wp-content/uploads/2018/05/cropped-peterkellnernet-300x60.png");
        background-size: contain;
        background-repeat: no-repeat;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        display: inline;
      }

然后使用$(document).ready()和addClass()，只需将上面的类直接添加到body元素。像这样的：

$(document).ready(function() {
    $('body').addClass('loadedBody')
})

更多信息在这里：https://api.jquery.com/addClass/

【讨论】：

如果我在不刷新页面的情况下一遍又一遍地执行此操作，是否会导致浏览器内存泄漏？也就是说，如果我有一个按钮可以切换 body 元素上的类。
@PeterKellner 不，彼得，它不会。当此过程非常迅速地完成时，例如几毫秒内，并且仅在小型低端设备上，可能会发生内存泄漏。但它可能会使页面变得迟缓，比如在一些功能较弱的设备上出现小的口吃和普遍的缓慢感觉。底线：继续它，不要担心内存泄漏。
@PeterKellner 嘿，彼得！只是一个友好的提醒，如果我的回答对你有用，请接受它作为正确的答案。只是想获得一些甜蜜的声誉点！ ;) 谢谢！