В этой статье демонстрируются различные методы удаления CSS из div с помощью jQuery.
Как удалить CSS из Div с помощью jQuery?
Чтобы удалить стили CSS из div, используйте встроенные атрибуты jQuery. Существует два метода, с помощью которых пользователи могут добавлять или удалять стили: встроенный и с использованием классов.
Способ 1: удалить встроенный CSS из Div
Чтобы удалить встроенные стили, применяемые к элементу HTML, удалитьАтрибут() используется метод ».
Он используется, когда требуется небольшая стилизация элемента. Выполните следующие шаги, чтобы справиться с этим:
Шаг 1: Создайте структуру
В файле HTML создайте « <дел> » и добавьте в него несколько HTML-элементов. Например, ' », « ' и ' ” используются в приведенном ниже коде:
< див >
< h1 > Здравствуйте, пользователи Linuxhint. < / h1 >
< h2 > Linuxhint - это место рая < / h2 >
< п > запросы, связанные с языками программирования. < / п >
< / див >
< кнопка > Удаление стилей для Div < / кнопка >
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод показывает HTML-структуру div и кнопки.
Шаг 2: Добавьте встроенный стиль
Внутри открывающего тега div используется « стиль ” и примените некоторые свойства CSS, чтобы сделать элементы заметными и привлекательными:
цвет: темно-пурпурный;
цвет фона: средний аквамарин;
поле: 20 пикселей;
отступ: 30px;' >
< h1 >Здравствуйте, пользователи Linuxhint< / h1 >
< h2 >Linuxhint - это рай< / h2 >
< п >запросы, связанные с языками программирования.< / п >
< / див >
< бр >
< кнопка > Стиль Удалять для Раздел< / кнопка >
Вывод приведенного выше кода:
Вывод подтверждает, что встроенные стили применяются только к элементу div.
Шаг 3: Использование jQuery для удаления встроенного CSS
Чтобы удалить атрибуты стиля, родительская функция вызывается, когда « документ ' является ' готовый ». В приведенном ниже коде внутренняя функция вызывается, когда пользователь нажимает кнопку « кнопка ». После этого эта функция выбирает все элементы div, находящиеся на странице, и использует « удалить.Атрибут() метод:
$ ( документ ) .готовый ( функция ( ) {
$ ( 'кнопка' ) .клик ( функция ( ) {
$ ( 'див' ) .removeAttr ( 'стиль' ) ;
} ) ;
} ) ;
< / сценарий >
После добавления кода jQuery веб-страница работает следующим образом:
Приведенный выше «gif» показывает, что примененные стили в div удаляются при нажатии на кнопку.
Способ 2: удалить класс CSS из Div
Второй способ стилизации HTML-элемента заключается в назначении им « сорт ». Затем добавьте CSS в эту часть класса внутри « <стиль> ” или в отдельном “ CSS-файл ». Эти стили также можно удалить с помощью jQuery. Выполните следующие шаги:
Шаг 1: Назначьте класс элементу Div
В файле HTML назначьте атрибут класса « <дел> элемент. Кроме того, назначьте идентификатор «удаления» для « <кнопка> ' ярлык:
< h1 >Здравствуйте, пользователи Linuxhint< / h1 >
< h2 >Linuxhint - это рай< / h2 >
< п >запросы, связанные с языками программирования.< / п >
< / див >
< кнопка идентификатор '=' 'удалять' > Стиль Удалить < / кнопка >
Далее переходим в « <стиль> ” и выберите имя класса div “ стиль ” и введите свойства CSS, которые применяются к элементу div:
< стиль >.стиль {
цвет :золотник;
фон- цвет : цвет морской волны;
поле: 20 пикселей;
отступ: 30 пикселей;
}
< / стиль >
После выполнения приведенного выше кода веб-страница выглядит так:
Вывод показывает, что стили применены к элементу div.
Шаг 2. Добавьте jQuery для удаления стилей CSS
В ' <скрипт> » добавьте код jQuery, такой же, как указано в приведенном выше методе. jQuery “ удалитькласс() ' метод удаляет ' стиль », которому присваивается элемент «div» при нажатии кнопки:
$ ( документ ) .готовый ( функция ( ) {
$ ( 'кнопка' ) .клик ( функция ( ) {
$ ( 'див' ) .removeClass ( 'укладка' ) ;
} ) ;
} ) ;
< / сценарий >
После добавления приведенного выше кода веб-страница работает следующим образом:
Приведенный выше «gif» показывает, что стили, набранные в классе, удаляются одним нажатием кнопки.
Заключение
Чтобы удалить CSS из div, « удалить.Атрибут() ' и ' удалитькласс() можно использовать методы. “ удалить.Атрибут() ” удаляет “ стиль ” атрибут выбранного элемента. С другой стороны, « удалитькласс() ” удаляет выбранный класс элемента, который использовался для применения стилей к этому элементу. В этой статье успешно продемонстрировано, как удалить CSS из div с помощью jQuery.