search

Jika elemen tidak memiliki kelas javascript

1 years ago
Komentar: 0
Dibaca: 133

Properti :not()_ di CSS adalah kelas semu negasi dan menerima daftar pemilih sebagai argumen. Itu cocok dengan elemen yang tidak diwakili oleh argumen. Argumen yang diteruskan tidak boleh berisi pemilih tambahan atau pemilih elemen semu apa pun

Show

Kemampuan untuk menggunakan a sebagai argumen dianggap eksperimental, meskipun dukungannya berkembang pada saat penulisan ini, termasuk Safari (sejak 2015), Firefox (sejak Desember 2020), dan Chrome (sejak Januari 2021)

CodePen Embed Fallback

/* the X argument can be replaced with any simple selectors */
:not(X) {
  property: value;
}

Dalam contoh ini kami memiliki unordered list dengan satu kelas di <li>

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
_

CSS kita akan memilih semua <li> elemen kecuali elemen dengan kelas 

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
0

/* Style everything but the .different class */
li:not(.different) {
  font-size: 3em;
}

Anda juga bisa melakukan hal yang sama menggunakan kelas semu yang dianggap a

p:not(:nth-child(2n+1)) {
  font-size: 3em;
}
_

Namun, jika kita menggunakan pemilih elemen semu sebagai argumen kita, itu tidak akan menghasilkan hasil yang diharapkan

:not(::first-line) { /* ::first-line is a pseudo element selector and not a simple selector */
  color: white;
}

Pemilih yang kompleks

Ini lebih baru dari :not() pemilih dasar

/* select all <p>s that are not descendants of <article> */
p:not(article *) {

}
_

CodePen Embed Fallback

Ini bisa sedikit membengkokkan pikiran hanya dengan sedikit lebih bersarang. Sebagai contoh

h2:not(:where(article *, section *)) {
  .. 
}

/*
<article>
  <h2> No match! </h2>
</article>

<section>
  <h2> No Match! </h2>
</section>

<aside>
  <h2> Match! </h2>
</aside>
*/

Contoh visual

Jika elemen tidak memiliki kelas javascript
Representasi visual dari berbagai penggunaan :not()

Kekhususan

Kekhususan 

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
3 pseudo-class adalah kekhususan argumennya. :not() pseudo-class tidak menambah spesifisitas pemilih, tidak seperti pseudo-class lainnya.  

Negasi tidak boleh bertingkat sehingga 

<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
5 tidak pernah diizinkan. Penulis juga harus memperhatikan bahwa karena elemen semu tidak dianggap sebagai , elemen tersebut tidak valid sebagai argumen untuk 
<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
6. Berhati-hatilah saat menggunakan pemilih atribut karena beberapa tidak didukung secara luas seperti yang lainnya. Menggabungkan 
<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
3 pemilih dengan 
<ul>
  <li></li>
  <li class="different"></li>
  <li></li>
</ul>
3 pemilih lainnya diperbolehkan

Dukungan peramban

Kelas semu :not() telah diperbarui untuk mengizinkan daftar argumen. Di CSS Selectors Level 3, itu hanya mampu menerima satu pemilih sederhana. Akibatnya, dukungan browser sedikit terbagi antara draft Level 3 dan Level 4

pemilih sederhana

IEEdgeFirefoxChromeSafariOpera9+AllAllAll12. 1+AllAndroid ChromeAndroid FirefoxAndroid BrowseriOS SafariOpera MobileAllAllAllAllAll

Daftar pemilih

Data dukungan browser ini berasal dari , yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur tersebut pada versi tersebut dan yang lebih baru

Artikel ini akan mendemonstrasikan pendekatan untuk memeriksa apakah sebuah badan memiliki kelas tertentu menggunakan JavaScript

Bagaimana Cara Memeriksa apakah Tubuh memiliki Kelas Khusus Menggunakan JavaScript?

Untuk memeriksa apakah suatu badan memiliki kelas tertentu menggunakan JavaScript, terapkan pendekatan berikut

  • properti “classList” dan metode “contains()”.
  • metode “getElementsByTagName()” dan “match()”.
  • “jQuery”

Mari kita ilustrasikan masing-masing pendekatan satu per satu

Pendekatan 1. Periksa apakah Tubuh memiliki Kelas Khusus dalam JavaScript Menggunakan Properti classList dan Metode berisi ().

Properti "classList" memberikan nama kelas CSS dari suatu elemen. Sedangkan metode “contains()” memberikan nilai true jika sebuah node adalah keturunan. Gabungan metode ini dapat diterapkan untuk mengakses kelas yang terkandung dalam elemen terkait

Sintaksis

simpul. berisi( desnode )

Dalam sintaks di atas

  • "desnode" sesuai dengan node keturunan dari node terkait

Contoh
Mari kita ikhtisar contoh yang diberikan di bawah ini

< pusat >< tubuh kelas= "contain">
< h2 > Ini adalah Situs Web Linuxint h2>
pusat>tubuh>< center>body>
< jenis skrip ="teks/javascript">
jika ( dokumen. tubuh . DaftarKelas . berisi('berisi')){
 konsol. log("Elemen body memiliki kelas");
}
else{
 konsol. log("Elemen body tidak memiliki kelas");
}
skrip>script>

Terapkan langkah-langkah di bawah ini, seperti yang diberikan dalam kode di atas

  • Firstly, include a “” element having the set attribute “class”.
  • Also, add a heading within the particular element().
  • Dalam kode JS, terapkan properti "classList" yang digabungkan dengan metode "contains()".
  • This will resultantly access to the class of the associated “” element based on the specified class name in the method’s parameter.
  • Setelah kondisi terpenuhi, kondisi "jika" akan dijalankan
  • Sebaliknya, blok kode pernyataan "else" akan dieksekusi

Keluaran

Jika elemen tidak memiliki kelas javascript

In the above output, it can be seen that the particular class is included in the “” element.

Pendekatan 2. Periksa apakah Body memiliki Kelas Tertentu dalam JavaScript Menggunakan Metode getElementsByTagName() dan match()

Metode “getElementsByTagName()” memberikan kumpulan semua elemen yang memiliki nama tag tertentu. Metode “match()” cocok dengan nilai yang ditentukan dengan string. Metode-metode ini dapat digunakan untuk mengakses elemen yang diperlukan dengan tag-nya dan memeriksa kelas tertentu

Sintaksis

dokumen. getElementsByTagName( tag )

Dalam sintaks yang disediakan

  • "tag" mewakili nama tag elemen

Contoh
Contoh berikut menunjukkan konsep yang dibahas

< pusat >< tubuh kelas="contains">
< img src ="template2. png" tinggi ="150px" lebar ="150px">
pusat>tubuh>< center>body>
< jenis skrip ="teks/javascript">
mari dapatkan = dokumen. getElementsByTagName("body")[0].namakelas . cocok(/contains/)
jika (dapatkan) {
 konsol. log("Elemen body memiliki kelas");
}
else {
 konsol. log("Elemen body tidak memiliki kelas");
}
skrip>script>

Dalam cuplikan kode di atas

  • Likewise, include a “” element having the specified class.
  • Juga, isi gambar dengan dimensi yang ditetapkan di dalam elemen yang disebutkan di langkah sebelumnya
  • In the JavaScript lines of code, access the “” element by its tag using the “getElementsByTagName()” method.
  • “[0]” menunjukkan bahwa elemen pertama yang terkait dengan tag yang disebutkan pada langkah sebelumnya akan diambil
  • The “className” property and the “match()” method will match for the stated class in its parameter against the “” element.
  • Pernyataan sebelumnya dalam kondisi "jika" akan dieksekusi setelah semua kondisi di langkah sebelumnya terpenuhi
  • Jika tidak, pernyataan terakhir akan ditampilkan

Keluaran

Jika elemen tidak memiliki kelas javascript

Output di atas menunjukkan bahwa kondisi yang diterapkan untuk kelas tertentu terpenuhi

Pendekatan 3. Periksa apakah Tubuh memiliki Kelas Khusus di JavaScript Menggunakan jQuery

Pendekatan ini dapat diimplementasikan untuk mengakses elemen yang diperlukan secara langsung dan menempatkan kelas tertentu di atasnya dengan bantuan metodenya secara sederhana

Contoh
Mari kita lihat contoh yang diberikan di bawah ini

< skrip src ="https. //ajax. googleapis. com/ajax/libs/jquery/3. 5. 1/jquery. min. js"> skrip >
< pusat >< tubuh kelas="contains">
< textarea placeholder ="Ketik teks apa saja. "> textarea >
pusat>tubuh>< center>body>

jika ( $ ("tubuh").hasClass("berisi")){
 peringatan ("Elemen body memiliki kelas")
}
else{
 peringatan ("Elemen body tidak memiliki kelas")
}
skrip>script>

Pada baris kode di atas

  • Sertakan perpustakaan "jQuery" untuk memanfaatkan fungsinya
  • Similarly, include the “” element having the stated class.
  • Also, add a “