Question

我的网页上有一种样式，该样式使用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>

Answer 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/

如何在jQuery中设置body :: before中的背景图像

1 个答案: