Как да премахнете CSS от Div с помощта на jQuery?

Kak Da Premahnete Css Ot Div S Pomosta Na Jquery



Някои стажанти или нови разработчици добавят твърде много свойства за стилизиране, за да изградят дизайн. Ако дизайнът е зареден с твърде много стилове и ръководителят на проекта иска да вижда само HTML, тук jQuery може да премахне всички стилове, като напише своите 4 до 5 реда код. Това е много ефективен и ефективен метод чрез премахване на стилове и виждане на структурата на този div или HTML на страницата.

Тази статия демонстрира различните методи за премахване на CSS от div с помощта на jQuery.

Как да премахнете CSS от Div с помощта на jQuery?

За да премахнете CSS стилове от div, използвайте вградените атрибути на jQuery. Има два метода, чрез които потребителите могат да добавят или премахват стилове, вградени и използващи класове.







Метод 1: Премахване на вграден CSS от Div

За да премахнете вградените стилове, които се прилагат към HTML елемента, „ removeAttr() “ се използва методът.



Използва се, когато е необходимо малко стилизиране на елемент. Следвайте стъпките по-долу, за да се справите с него:



Стъпка 1: Създайте структура
В HTML файла създайте „

” и добавете множество HTML елементи вътре в него. Например, '

”, “

' и '

” таговете се използват в кода по-долу:





< див >
< h1 > Здравейте потребители на Linuxhint < / h1 >
< h2 > Linuxhint е мястото на небето < / h2 >
< стр > запитвания, свързани с езиците за програмиране. < / стр >
< / див >
< бутон > Премахване на стил за Div < / бутон >

След изпълнение на горния код, уеб страницата изглежда така:





Резултатът показва HTML структурата на div и бутон.

Стъпка 2: Добавете вграден стил
Вътре в отварящия таг div използва „ стил ” и приложете някои CSS свойства, за да направите елементите видни и привлекателни:

< див стил = '
цвят: тъмнопурпурен;
цвят на фона: среден аквамарин;
поле: 20px;
подложка: 30px;'
>
< h1 >Здравейте потребители на Linuxhint< / h1 >
< h2 >Linuxhint е мястото на рая< / h2 >
< стр >заявки, свързани с езиците за програмиране.< / стр >
< / див >
< бр >
< бутон > стил Премахване за Div< / бутон >

Резултатът от горния код е:

Резултатът потвърждава, че вградените стилове се прилагат само към елемента div.

Стъпка 3: Използване на jQuery за премахване на вграден CSS
За да премахнете атрибути на стил, родителската функция се извиква, когато „ документ 'е' готов ”. В кода по-долу вътрешната функция се извиква, когато потребителят щракне върху „ бутон ”. След това тази функция избира всички div елементи, които се намират на страницата и използва „ премахване.Attr() ” метод:

< сценарий >
$ ( документ ) .готов ( функция ( ) {
$ ( 'бутон' ) .щракване ( функция ( ) {
$ ( 'div' ) .removeAttr ( 'стил' ) ;
} ) ;
} ) ;
< / сценарий >

След добавяне на jQuery кода, уеб страницата работи по следния начин:

Горният „gif“ илюстрира, че приложените стилове върху div се премахват чрез щракване върху бутона.

Метод 2: Премахнете CSS на клас от Div

Вторият начин за стилизиране на HTML елемента е като им присвоите „ клас ”. След това добавете CSS в тази част от класа вътре в „ <стил> ” етикет или в отделен “ CSS файл ”. Тези стилове могат да бъдат премахнати и с помощта на jQuery. Следвайте стъпките по-долу:

Стъпка 1: Присвояване на клас на Div елемент
В HTML файла присвоете атрибут клас на „

” елемент. Освен това задайте идентификатор на „премахвач“ на „ <бутон> ” етикет:

< див клас = 'стайлинг' >
< h1 >Здравейте потребители на Linuxhint< / h1 >
< h2 >Linuxhint е мястото на рая< / h2 >
< стр >заявки, свързани с езици за програмиране.< / стр >
< / див >
< бутон документ за самоличност = 'Премахване' > стил Премахни < / бутон >

След това отидете на „ <стил> ” етикет и изберете името на класа div “ стайлинг ” и въведете CSS свойства, които се прилагат към елемента div:

< стил >
.стайлинг {
цвят : златна пръчица;
заден план- цвят : морско зелено;
поле: 20px;
подложка: 30px;
}
< / стил >

След изпълнение на горния код, уеб страницата изглежда така:

Изходът показва, че стиловете са приложени към елемента div.

Стъпка 2: Добавете jQuery, за да премахнете CSS стила
в „ <скрипт> ” добавете jQuery код, същият като посочения в горния метод. jQuery “ removeClass() ' методът премахва ' стайлинг ”, който се присвоява с елемента „div” при щракване върху бутона:

< сценарий >
$ ( документ ) .готов ( функция ( ) {
$ ( 'бутон' ) .щракване ( функция ( ) {
$ ( 'div' ) .removeClass ( 'стайлинг' ) ;
} ) ;
} ) ;
< / сценарий >

След добавяне на горния код, уеб страницата работи по следния начин:

Горният „gif“ илюстрира, че стиловете, въведени в класа, се премахват с натискане на бутон.

Заключение

За да премахнете CSS от div, „ премахване.Attr() ' и ' removeClass() ” могат да се използват методи. „ премахване.Attr() ” премахва „ стил ” от елемента, който е избран. От друга страна, „ removeClass() ” премахва избрания клас елемент, който е бил използван за прилагане на стилове към този елемент. Тази статия успешно демонстрира как да премахнете CSS от div с помощта на jQuery.