jQuery: Получение, установка и удаление фонового изображения с помощью jquery

10/12/2021 22:28

В этом руководстве вы узнаете, как получить фоновое изображение div, как установить фоновое изображение div и как удалить фоновое изображение div с помощью jQuery.

Здесь вы шаг за шагом научитесь получать, устанавливать и удалять фоновое изображение с помощью jQuery.

Как получить фоновое изображение при помощи jQuery

Вы можете использовать приведенный ниже код для получения фонового изображения в jQuery.

$(".btn-get").click(function() {
    var bg = $('div').css('background-image'); // получаем фоновое изображение с помощью свойства css
    bg = bg.replace('url(','').replace(')','');
    alert(bg);
});

Как установить фоновое изображение при помощи jQuery

Вы можете использовать приведенный ниже код для установки фонового изображения с помощью свойства jQuery CSS.

$(".btn-set").click(function() {
 
 var img = '//makecodes.ru/uploads/posts/2021-12/1639086924_jquery.webp';
 var bg = $('div').css('background-image',"url(" + img + ")");
});

Как удалить фоновое изображение при помощи jQuery

Вы можете использовать приведенный ниже код для удаления фонового изображения с помощью свойства jQuery CSS.

$(".btn-remove").click(function() {
    var bg = $('div').css('background-image','none');
});

Пример

Здесь мы возьмем пример, в этом примере мы получим фоновое изображение div, мы установим фоновое изображение и удалим фоновое изображение с помощью свойства jQuery css

<html>
 
   <head>
 
      <title>Пример получения, установки и удаления фонового изображения</title>
 
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
 
      <script>
 
        $(function() {
            $(".btn-get").click(function() {
                var bg = $('#bg-img').css('background-image');
                bg = bg.replace('url(','').replace(')','');
                alert(bg);
            });            
            $(".btn-remove").click(function() {
                var bg = $('#bg-img').css('background-image','none');
            });            
            $(".btn-set").click(function() {
 
                var img = '//makecodes.ru/uploads/posts/2021-12/1639086924_jquery.webp';
                var bg = $('#bg-img').css('background-image',"url(" + img + ")");
            });
        });
 
      </script>
      <style>
        .card{
            margin: 30px;
        }
     </style>
   </head>
 
   <body>
 
    <div class="card">
        <div id="bg-img" style="background-image: url('//makecodes.ru/uploads/posts/2021-12/1639001779_codeigniter-4.webp');  width: 1000px; height: 500px;">
             
        </div>
    </div>
 
 
   <button type="type" class="btn-get">Получить фоновое изображение</button>
   <button type="type" class="btn-set">Установить фоновое изображение</button>
   <button type="type" class="btn-remove">Удалить фоновое изображение</button>
 
 
   </body>
 
</html>

Jquery

0 + 0 -

MakeCodes
0
396