Как установить background-image в body :: before с помощью jQuery - PullRequest
Новая
       3

Как установить background-image в body :: before с помощью jQuery

0 голосов
/ 23 июня 2019

У меня есть стиль на моей веб-странице, который использует 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>

1 Ответ

2 голосов
/ 23 июня 2019

Что вы можете сделать вместо того, чтобы пытаться стилизовать псевдоэлемент (который не доступен через 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...