Тази статия ще демонстрира подходите за проверка дали тялото има специфичен клас с помощта на JavaScript.
Как да проверите дали Body има конкретен клас с помощта на JavaScript?
За да проверите дали тялото има конкретен клас с помощта на JavaScript, приложете следните подходи:
- “ classList „имот и“ съдържа() ” метод.
- “ getElementsByTagName() ' и ' съвпада() ” методи.
- “ jQuery ”.
Нека илюстрираме всеки от подходите един по един!
Подход 1: Проверете дали Body има конкретен клас в JavaScript, като използвате свойството classList и съдържа () методи
„ classList ” дава имената на CSS клас на даден елемент. като има предвид, че „ съдържа() ” дава true, ако възелът е наследник. Тези комбинирани методи могат да бъдат приложени за достъп до съдържащия се клас в свързания елемент.
Синтаксис
възел. съдържа ( гол )
В горния синтаксис:
- “ гол ” съответства на възела наследник на свързания възел.
Пример
Нека направим общ преглед на дадения по-долу пример:
< център >< тяло клас = 'съдържам' >
< h2 > Това е уебсайт на Linuxhint h2 >
център > тяло >
< тип скрипт = 'текст/javascript' >
ако ( документ. тяло . classList . съдържа ( 'съдържам' ) ) {
конзола. дневник ( „Елементът тяло има класа“ ) ;
}
друго {
конзола. дневник ( „Елементът тяло няма клас“ ) ;
}
сценарий >
Приложете посочените по-долу стъпки, както е дадено в горния код:
- Първо включете „ <тяло> ' елемент с атрибута set ' клас ”.
- Освен това добавете заглавие в конкретния елемент ( ).
- В JS кода приложете „ classList ” собственост, комбинирана с „ съдържа() ” метод.
- Това ще доведе до достъп до класа на свързания „ <тяло> ” елемент въз основа на указаното име на клас в параметъра на метода.
- При изпълнено условие „ ако ” условието ще се изпълни.
- Обратно, „ друго ” ще се изпълни кодовият блок на изявление.
Изход
В горния изход може да се види, че конкретният клас е включен в „ <тяло> ” елемент.
Подход 2: Проверете дали Body има конкретен клас в JavaScript, като използвате методите getElementsByTagName() и match()
„ getElementsByTagName() ” дава колекция от всички елементи с определено име на етикет. „ съвпада() ” съвпада посочената стойност с низа. Тези методи могат да се използват за достъп до необходимия елемент чрез неговия таг и проверка за конкретния клас.
Синтаксис
документ. getElementsByTagName ( етикет )В предоставения синтаксис:
- “ етикет ” представлява името на етикета на елемента.
Пример
Следният пример демонстрира обсъжданата концепция:
< img src = 'template2.png' височина = '150px' ширина = '150px' >
център > тяло >
< тип скрипт = 'текст/javascript' >
позволявам получавам = документ. getElementsByTagName ( 'тяло' ) [ 0 ] . className . съвпада ( /съдържа/ )
ако ( получавам ) {
конзола. дневник ( „Елементът тяло има класа“ ) ;
}
друго {
конзола. дневник ( „Елементът тяло няма клас“ ) ;
}
сценарий >
В горния кодов фрагмент:
- По същия начин включете „ <тяло> ” елемент с посочения клас.
- Освен това съдържа изображение със зададените размери в посочения елемент в предишната стъпка.
- В кодовите редове на JavaScript отворете „ <тяло> ” чрез неговия таг с помощта на „ getElementsByTagName() ” метод.
- „ [0] ” показва, че ще бъде извлечен първият елемент, съответстващ на посочения етикет в предишната стъпка.
- „ className ” собственост и „ съвпада() ” методът ще съвпадне за посочения клас в неговия параметър срещу „ <тяло> ” елемент.
- Предишното изявление в „ ако ” условие ще се изпълни при удовлетворяване на всички условия в предишните стъпки.
- В противен случай ще се покаже последното изявление.
Изход
Горният резултат показва, че приложеното условие за конкретен клас е изпълнено.
Подход 3: Проверете дали Body има конкретен клас в JavaScript с помощта на jQuery
Този подход може да бъде приложен за директен достъп до необходимия елемент и локализиране на конкретния клас срещу него с помощта на неговия метод просто.
Пример
Нека да преминем през дадения по-долу пример:
< център >< тяло клас = 'съдържа' >
< контейнер за текстово поле = „Въведете произволен текст...“ > текстово поле >
център > тяло >
ако ( $ ( 'тяло' ) . hasClass ( 'съдържа' ) ) {
тревога ( „Елементът тяло има класа“ )
}
друго {
тревога ( „Елементът тяло няма клас“ )
}
сценарий >
В горните редове код:
- Включете „ jQuery ”, за да използвате неговите функционалности.
- По същия начин включете „ <тяло> ” елемент с посочения клас.
- Също така добавете „