Как определить и изменить содержимое / стиль div с помощью jQuery?

Опубликовано: 18 Декабря, 2021

Изменения в html / тексте div можно обнаружить с помощью метода jQuery on (). On () используется для присоединения одного или нескольких обработчиков событий для выбранных элементов и дочерних элементов в дереве DOM. Метод on () является заменой методов bind (), live () и delegate () из jQuery версии 1.7.

Синтаксис:

 $ (селектор) .on (событие, childSelector, данные, функция, карта)

Пример 1. В этом примере используется метод jQuery on () для изменения текста элемента <div>.

 <!DOCTYPE html>
 < html >
     
< head >
    < title >
        How to detect and change the
        content of a div using JQuery ?
    </ title >
     
    < script src =
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
    </ script >
     
    < style >
        #div1 {
            font-size: 35px;
            color:green;
            text-align:center;
        }
    </ style >
     
    < script >
        $(document).ready(function(){
            $("div").on("click", function(){
                document.getElementById("div1").innerHTML
                    = "A computer science portal for geeks";
            });
        });
    </ script >
 </ head >
 
< body >
    < div id = "div1" >GeeksforGeeks!</ div >
 </ body >
 
</ html > 

Выход:

Прежде чем щелкнуть элемент div:
После щелчка по элементу div:

Пример 2: В этом примере используется метод jQuery on () для изменения стиля элемента <div>.

 <!DOCTYPE html>
 <html>
     
<head>
    <title>
        How to detect and change the
        style of a div using JQuery?
    </title>
     
    <script src=
 " https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js " >
    </script>
     
    <style>
        #div1 {
            font-size: 35px;
            color:green;
            text-align:center;
        }
    </style>
     
    <script>
        $(document).ready( function (){
            $( "div" ).on( "click" , function (){
                document.getElementById( "div1" ).style.color
                            = "white" ;
                             
                document.getElementById( "div1" ).style.backgroundColor
                            = "green" ;
            });
        });
    </script>
 </head>
 
<body>
    <div id= "div1" >Welcome to GeeksforGeeks!!!</div>
 </body>
 
</html>

Выход:

Прежде чем щелкнуть элемент div:
После щелчка по элементу div:

Вопросы о Web технологиях JQuery Picked

Как определить и изменить содержимое / стиль div с помощью jQuery?

РЕКОМЕНДУЕМЫЕ СТАТЬИ