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