search

Cara mengecek kelas css ada di javascript

1 years ago
Komentar: 0
Dibaca: 57

Ada beberapa metode yang digunakan untuk memeriksa apakah elemen berisi kelas. Mari kita bahas secara terpisah

Show

Metode pertama yang dapat menangani tugas tersebut adalah elemen. Daftar kelas. berisi metode. Fungsi hanya membutuhkan satu parameter. Metode berisi memeriksa apakah classList Anda berisi elemen tunggal

element.classList.contains(class);

Tetapi jika Anda bekerja dengan browser lama dan tidak ingin menggunakan polyfill, gunakan seperti ini

function hasClass(element, clsName) {
  return (' ' + element.className + ' ').indexOf(' ' + clsName + ' ') > -1;
}
_

Jika tidak, akan mengembalikan nilai true jika kelas yang Anda cari adalah bagian dari nama kelas lain



  
    Title of the document
  
  
    
Welcome to W3Docs

Metode hasClass() memeriksa apakah salah satu elemen yang dipilih memiliki nama kelas tertentu. Metode mengembalikan true jika salah satu elemen yang dipilih memiliki nama kelas yang ditentukan. Elemen mungkin memiliki beberapa kelas yang ditugaskan padanya

Dalam tutorial ini kita akan belajar cara Memeriksa Apakah Elemen HTML dari Kelas tertentu Ada menggunakan JavaScript. Metode HTML DOM getElementsByClassName() dan. panjang properti dapat digunakan untuk tujuan ini

Daftar isi

Kode HTML

Kode HTML diberikan di bawah ini, dalam kode ini kami memiliki tag paragraf dengan kelas merah, kami juga memiliki tag tombol dengan acara onclick

________0

Kode JavaScript

Lihatlah kode JavaScript, metode HTML Dom getElementsByClassName() digunakan. properti panjang

HTML Dom getElementsByClassName() digunakan untuk memilih semua elemen HTML dengan kelas tertentu

properti panjang mengembalikan panjang string. Dalam contoh ini digunakan untuk menghitung jumlah elemen yang dipilih dengan kelas yang ditentukan (merah)

Jika jawaban elemen. panjang lebih besar dari 0, itu berarti kelas ada

________1

Cara lain untuk memeriksa ini adalah dengan menggunakan kode berikut

________2

Dalam kode di atas. properti classList digunakan yang digunakan untuk mengembalikan nama kelas sebagai objek

berisi digunakan untuk memeriksa kelas di objek classList. Jawaban dari. berisi adalah nilai Boolean

Memeriksa apakah suatu kelas ada pada suatu elemen sederhana dan cepat dengan metode contains() properti classList JavaScript

Pertama mari kita lihat rumus umum untuk menggunakan classList.contains() dan kemudian kita akan melihat kasus penggunaan praktis

Daftar kelas. berisi() rumus

var element = document.querySelector("selector")
element.classList.contains("class")

Dalam contoh umum di atas, kami menggunakan metode serbaguna querySelector() untuk menemukan elemen target kami melalui nama pemilihnya. Pemilih bisa berupa pemilih kelas, pemilih elemen, atau jenis pemilih lainnya

Kami kemudian menetapkan elemen yang kami temukan dengan querySelector() ke variabel element yang kami nyatakan

Kemudian kami lampirkan metode contains() properti classList ke element kami melalui referensi variabelnya. Kemudian di dalam argumen metode contains() (di dalam tanda kurung) kami menentukan nama 'kelas' yang ingin kami periksa apakah ada

Contoh umum membosankan, mari kita praktis

Umpan Berita yang Rapi

Memfilter dengan classList. mengandung()
- kasus penggunaan praktis

Cara mengecek kelas css ada di javascript

Anda mengunjungi situs web dengan umpan berita campuran dari berbagai kategori. Tapi Anda hanya tertarik membaca tentang teknologi

Umpan berita yang berantakan adalah penghujatan. Mari memfilter semua kategori lainnya, menggunakan metode classList.contains()

Pertama, mari tambahkan beberapa HTML sehingga kita memiliki beberapa konten untuk dikerjakan. Lalu kita akan menatanya dengan cepat, dan beralih ke JavaScript

HTML untuk umpan berita kami

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
_

Untuk konten HTML kami, kami memiliki

  • Judul besar
  • Umpan berita dengan berbagai kategori
  • Di luar umpan berita, kami memiliki tombol bernama Teknologi. Ini adalah tombol yang akan kami gunakan untuk mengalihkan (menyembunyikan/menampilkan) semua topik non-teknologi

Jelas, contoh feed berita kami di atas hanya memiliki beberapa item berita (untuk tujuan ilustrasi), sehingga tidak terlihat berantakan. Tapi umpan berita yang sangat beragam akan ada segudang artikel dari setiap kategori berita, membanjiri umpan. Saat itulah tombol pemfilteran berguna

Gaya CSS

Semua CSS berikut bersifat kosmetik dan opsional, kecuali kelas 

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
2, yang merupakan kelas pembantu yang akan kita gunakan dengan JavaScript di segmen berikutnya

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
_

Pastikan Anda menambahkan kelas 

<div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
_2 itu ke stylesheet CSS Anda dan mari beralih ke JavaScript

JavaScript

Salin dan tempel kode berikut ke file JS Anda. Saya akan menjelaskan bagaimana semuanya bekerja tepat di bawah

var btnTechnology = document.querySelector(".btn-technology")
var allNewsCategories = document.querySelectorAll(".news-feed .link")

function showCategoryTechnology() {
  for (var i = 0; i < allNewsCategories.length; i++) {
    if (!allNewsCategories[i].classList.contains("category-technology")) {
      allNewsCategories[i].parentElement.classList.toggle("js-hide")
    }
  }
}
btnTechnology.addEventListener("click", showCategoryTechnology)
_

Cara kerja kode JavaScript

  • Pertama kami menggunakan _______ 29 _______ untuk mengambil elemen tombol Teknologi kami dengan pemilih kelasnya 
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    5. yang akan bertindak sebagai pemicu untuk fungsi pemfilteran kita nanti. Kami menetapkan elemen tombol kami ke variabel yang disebut 
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    6
  • Kemudian kami menggunakan 
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    _7 untuk mengambil semua item Umpan Berita (
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    8) kami dan memilih setiap tautan item dengan nama kelasnya (
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    9). Kami kemudian menetapkan semua tautan item berita kami ke variabel yang disebut 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    0
  • Kemudian kami membuat fungsi, 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    _1 yang akan kami panggil saat tombol Teknologi diklik
  • Di dalam badan fungsi, kita mengulangi semua item () di dalam elemen Umpan Berita dan menyimpannya dalam larik 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    2
  • Di dalam loop, kami menambahkan pernyataan if kondisional yang berbunyi. “jika salah satu item dalam daftar yang baru saja kita ulangi tidak mengandung kelas 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    3 — kemudian jalankan classList. beralih metode dengan kelas 
    <div class="wrapper">
  <h1>Newsfeed</h1>

  <div class="news-feed">
    <h3 class="headline">
      <a class="link category-health" href="#">Health</a>
    </h3>
    <h3 class="headline">
      <a class="link category-finances" href="#">Finances</a>
    </h3>
    <h3 class="headline">
      <a class="link category-politics" href="#">Politics</a>
    </h3>
    <h3 class="headline">
      <a class="link category-nature" href="#">Nature</a>
    </h3>
    <h3 class="headline">
      <a class="link category-humor" href="#">Humor</a>
    </h3>
    <h3 class="headline">
      <a class="link category-weather" href="#">Weather</a>
    </h3>
    <h3 class="headline">
      <a class="link category-technology" href="#">Technology</a>
    </h3>
    <h3 class="headline">
      <a class="link category-sports" href="#">Sports</a>
    </h3>
  </div>

  <div class="fixed-container">
    <span>Filter:</span>
    <button class="btn-technology">Technology</button>
  </div>
</div>
<!-- wrapper -->
    _2 pada item tersebut
  • Pada baris terakhir, kami melampirkan metode 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    5 ke elemen tombol kami. Kami memberi tahu pendengar acara untuk mendengarkan acara 'klik'. Saat tombol diklik, ia memanggil fungsi 
    body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
    6, yang menjalankan seluruh blok kode yang memungkinkan fitur toggling ini

Simbol 

body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
7 (Operator Logika) yang kita tempatkan di depan 
body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
8 adalah yang menangani bagian "bukan" dari pernyataan 
body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
9 kita. Jika Anda menghapus 
body {
  font-family: "Source Sans Pro", "Helvetica", "Sans-Serif";
}

.wrapper {
  position: relative;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 2rem auto;
  max-width: 50em;
}

.news-feed {
  border: 1px solid #eee;
  max-height: 256px;
  overflow-y: scroll;
}

.headline {
  font-size: 1.25rem;
  padding: 0.25rem 1.5rem;
}

.link {
  color: #252525;
  text-decoration: none;
}

.fixed-container {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
}

.btn-technology {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin-top: 2rem;
  margin-left: 1rem;
  border-radius: 4px;
  border: 1px solid #82b97e;
  outline: none;
}

.js-hide {
  display: none;
}
_7 maka kode kami akan melakukan kebalikan dari apa yang dilakukannya sekarang

Kita juga bisa menggunakan classList. remove() untuk menghapus item berita yang tidak diinginkan. Namun dalam banyak kasus, masuk akal untuk memberi pengguna kami opsi untuk menyembunyikan/menampilkan item, yang merupakan classList. beralih() tidak

Bagaimana cara memeriksa apakah kelas CSS ada di JavaScript?

Dalam JavaScript, Anda dapat menggunakan metode contains() yang disediakan oleh objek classList untuk memeriksa apakah ada elemen yang berisi kelas CSS tertentu. Metode ini mengembalikan nilai true jika kelasnya ada. Jika tidak, false dikembalikan.

Bagaimana cara memeriksa apakah kelas ada di CSS?

Kita bisa menggunakan properti classList dari elemen DOM untuk memeriksa apakah elemen berisi kelas tertentu . Catatan. Properti classList berisi koleksi langsung dari kelas yang ada di elemen DOM.

Bagaimana cara memeriksa kelas objek dalam JavaScript?

Instanceof operator JavaScript digunakan untuk memeriksa jenis objek pada saat dijalankan. Ini mengembalikan nilai boolean (benar atau salah). Jika nilai yang dikembalikan benar, maka ini menunjukkan bahwa objek tersebut adalah turunan dari kelas tertentu dan jika nilai yang dikembalikan salah maka tidak.

Bagaimana cara memeriksa apakah suatu elemen ada di JavaScript?

var elemen = dokumen. getElementById('elementId'); . = if (typeof(element) != 'undefined' && elemen. = null) { // Ada. }

kode javascript

Pos Terkait

Apa halaman html paling sederhana?
Apa halaman html paling sederhana?

Cara menggunakan python dynamic multidimensional array
Cara menggunakan python dynamic multidimensional array

Bagaimana Anda menambahkan tag ke teks dalam html?
Bagaimana Anda menambahkan tag ke teks dalam html?

Cara memeriksa tabel di meja kerja mysql
Cara memeriksa tabel di meja kerja mysql

Cara unjumble kata-kata dengan python
Cara unjumble kata-kata dengan python

Cara mengatur beberapa nilai di mysql
Cara mengatur beberapa nilai di mysql

Cara kembali ke tampilan normal di excel setelah menambahkan header
Cara kembali ke tampilan normal di excel setelah menambahkan header

Tingkatkan mysql 5.6 ke 8 centos 7
Tingkatkan mysql 5.6 ke 8 centos 7

Apa arti tanggal dalam javascript?
Apa arti tanggal dalam javascript?

Cara menggunakan python ide
Cara menggunakan python ide

Periklanan

BERITA TERKINI

Apakah fungsi data cleaning dalam python?
1 years ago . by UndiscoveredDucking
Cara cek kartu kredit bca aktif atau tidak
1 years ago . by MythicalCoverage
Cara menggunakan setcookie not working javascript
1 years ago . by DrabServitude
Cara menggunakan fungsi struktur html
1 years ago . by ParticipatingAdvert
Which MySQL edition used for physical backup?
1 years ago . by HeedlessLikeness
Php imagemagick pdf ke png kualitas tinggi
1 years ago . by QuietRegularity
Cara menggunakan python raise typeerror
1 years ago . by DifficultImmunization
Cara mengisi game di ps 3
1 years ago . by VeterinaryReviewer
Bagaimana Anda memeriksa apakah saya sudah menginstal mysql?
1 years ago . by PriestlyDonkey
Mengapa gambar tidak ditampilkan di html?
1 years ago . by High-qualityWidget

Toplist Popular

#1
Top 7 os elementos da paisagem descritos no texto correspondem a aspectos biogeográficos presentes na 2022
1 years ago
#2
Top 6 a energia nuclear é uma alternativa aos combustíveis fósseis que, se não gerenciada de forma correta 2022
1 years ago
#3
Top 6 a persistência das reivindicações relativas à aplicação desse preceito normativo tem em vista 2022
1 years ago
#4
Top 7 wie viele zigaretten sind ein shisha kopf 2022
2 years ago
#5
Top 7 wie viel kostet eine badewanne voll wasser 2022
2 years ago
#6
Top 8 golf 7 standheizung fernbedienung anlernen 2022
2 years ago
#7
Top 8 sky receiver aufnehmen nicht möglich ohne abo 2022
2 years ago
#8
Top 5 einhell kgsz 300 ug sägeblatt wechseln 2022
2 years ago
#9
Top 7 renault clio 3 abblendlicht wechseln anleitung 2022
2 years ago
#10
Top 8 outlook diese datendatei ist mit einem e-mail-konto verbunden 2022
2 years ago

Periklanan

Terpopuler

Periklanan

Tentang Kami

Legal

Dukungan

Social

homeentrdeptjp
Copyright © 2024 membukakan Inc.