add metode classList hanya menerima string dan bukan array (String [, String [, ...]]) jadi saya ingin tahu apakah ada cara elegan untuk mengonversi array ke daftar string tanpa perulangan yang jelas:

var breakpoints = {
    "extraSmall"    : [ "only screen and (max-width: 575px)" ],
    "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ],
    "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ],
    "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ],
    "extraLarge"    : [ "only screen and (min-width: 1200px)" ],
}
Object.keys(breakpoints).map(feature => document.documentElement.classList.add(feature));

Pada dasarnya, saya ingin menambahkan beberapa kelas dalam satu panggilan.

1
eozzy 27 Oktober 2019, 11:29

2 jawaban

Jawaban Terbaik

Karena metode add menerima beberapa kelas sebagai parameter, Anda dapat menggunakan sintaks sebaran ... pada kunci objek untuk meneruskan setiap elemen dari kunci sebagai kelas.

var breakpoints = { "extraSmall"    : [ "only screen and (max-width: 575px)" ], "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ], "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ], "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ], "extraLarge"    : [ "only screen and (min-width: 1200px)" ],}
const div = document.querySelector('div');
const classes = Object.keys(breakpoints);
div.classList.add(...classes);
<div>Div</div>

Untuk browser versi lama yang tidak mendukung sintaks spread, Anda dapat menggunakan metode apply.

var breakpoints = { "extraSmall"    : [ "only screen and (max-width: 575px)" ], "small"         : [ "only screen and (min-width: 576px) and (max-width: 767px)" ], "medium"        : [ "only screen and (min-width: 768px) and (max-width: 991px)" ], "large"         : [ "only screen and (min-width: 992px) and (max-width: 1199px)" ], "extraLarge"    : [ "only screen and (min-width: 1200px)" ],}
const div = document.querySelector('div');
const classes = Object.keys(breakpoints);
div.classList.add.apply(div.classList, classes)
<div>Div</div>
1
Nenad Vracar 27 Oktober 2019, 09:10

Karena Anda tidak ingin membuat array baru, jangan gunakan .map. Sebaliknya, Anda ingin melakukan efek samping, jadi Anda harus menggunakan loop forEach atau for sebagai gantinya:

for (const newClass of Object.keys(breakpoints)) {
  document.documentElement.classList.add(newClass)
}

Untuk menghindari pengulangan sepenuhnya, Anda dapat (secara tidak elegan) menggabungkan dengan className yang ada:

document.documentElement.className += ` ${Object.keys(breakpoints).join(' ')}`;

Jika tag <html> belum memiliki nama kelas, spasi di depan tidak diperlukan. Jika sebelumnya tidak pasti apakah itu akan memiliki nama kelas atau tidak, akan lebih mudah untuk menggunakan classList.add sebagai gantinya.

2
CertainPerformance 27 Oktober 2019, 08:33