Bagaimana Anda mengubah dalam javascript?

Question

Browser modern telah menambahkan classList yang menyediakan metode untuk mempermudah manipulasi kelas tanpa memerlukan pustaka

Table of Contents Show

Solusi lintas-browser sederhana
Untuk mengubah semua kelas untuk suatu elemen
Untuk menambahkan kelas tambahan ke elemen
Untuk menghapus kelas dari elemen
Untuk memeriksa apakah suatu kelas sudah diterapkan ke suatu elemen
Framework dan Pustaka JavaScript
Mengubah Kelas dengan jQuery
Bagaimana cara menggunakan perubahan dalam JavaScript?
Bagaimana cara mengubah input dalam JavaScript?
Apa arti perubahan dalam JavaScript?
Bagaimana cara mengubah atribut dengan JavaScript?

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Sayangnya, ini tidak berfungsi di Internet Explorer sebelum v10, meskipun ada celah untuk menambahkan dukungan untuk itu ke IE8 dan IE9, tersedia dari halaman ini. Namun, itu semakin banyak

Solusi lintas-browser sederhana

Cara JavaScript standar untuk memilih elemen adalah menggunakan

document.getElementById("MyElement").className = "MyClass";

2, yang digunakan oleh contoh berikut - Anda tentu saja dapat memperoleh elemen dengan cara lain, dan dalam situasi yang tepat mungkin cukup menggunakan

document.getElementById("MyElement").className = "MyClass";

3 sebagai gantinya - namun, menjelaskan secara mendetail tentang hal ini di luar jangkauan

Untuk mengubah semua kelas untuk suatu elemen

Untuk mengganti semua kelas yang ada dengan satu atau lebih kelas baru, atur atribut className

document.getElementById("MyElement").className = "MyClass";

_

(Anda dapat menggunakan daftar yang dibatasi ruang untuk menerapkan banyak kelas. )

Untuk menambahkan kelas tambahan ke elemen

Untuk menambahkan kelas ke elemen, tanpa menghapus/mempengaruhi nilai yang ada, tambahkan spasi dan nama kelas baru, seperti itu

document.getElementById("MyElement").className += " MyClass";

_

Untuk menghapus kelas dari elemen

Untuk menghapus satu kelas ke suatu elemen, tanpa memengaruhi kelas potensial lainnya, diperlukan penggantian regex sederhana

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Penjelasan dari regex ini adalah sebagai berikut

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

_

Bendera

document.getElementById("MyElement").className = "MyClass";

4 memberi tahu penggantian untuk mengulang sesuai kebutuhan, jika nama kelas telah ditambahkan beberapa kali

Untuk memeriksa apakah suatu kelas sudah diterapkan ke suatu elemen

Regex yang sama yang digunakan di atas untuk menghapus kelas juga dapat digunakan sebagai pemeriksaan apakah ada kelas tertentu

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

_
### Menetapkan tindakan ini ke acara onClick

Meskipun dimungkinkan untuk menulis JavaScript secara langsung di dalam atribut acara HTML (seperti

document.getElementById("MyElement").className = "MyClass";

5), perilaku ini tidak disarankan. Khususnya pada aplikasi yang lebih besar, kode yang lebih dapat dipelihara diperoleh dengan memisahkan markup HTML dari logika interaksi JavaScript

Langkah pertama untuk mencapainya adalah dengan membuat fungsi, dan memanggil fungsi tersebut dalam atribut onClick, misalnya


...
My Button

(Tidak diharuskan untuk memiliki kode ini dalam tag skrip, ini hanya untuk singkatnya contoh, dan menyertakan JavaScript dalam file yang berbeda mungkin lebih tepat. )

Langkah kedua adalah memindahkan event onClick dari HTML ke JavaScript, misalnya menggunakan addEventListener


...
My Button

(Perhatikan bahwa jendela. bagian onload diperlukan agar konten dari fungsi tersebut dijalankan setelah HTML selesai dimuat - tanpa ini, MyElement mungkin tidak ada saat kode JavaScript dipanggil, sehingga baris tersebut akan gagal. )

Framework dan Pustaka JavaScript

Kode di atas semuanya dalam JavaScript standar, namun, praktik umum untuk menggunakan kerangka kerja atau pustaka untuk menyederhanakan tugas umum, serta mendapat manfaat dari bug yang diperbaiki dan kasus tepi yang mungkin tidak terpikirkan saat menulis kode Anda

Meskipun beberapa orang menganggap penambahan ~50 KB kerangka kerja hanya untuk mengubah kelas adalah berlebihan, jika Anda melakukan pekerjaan JavaScript dalam jumlah besar atau apa pun yang mungkin memiliki perilaku lintas-browser yang tidak biasa, sebaiknya pertimbangkan

(Secara kasar, perpustakaan adalah seperangkat alat yang dirancang untuk tugas tertentu, sementara kerangka kerja umumnya berisi banyak perpustakaan dan melakukan serangkaian tugas lengkap. )

Contoh di atas telah direproduksi di bawah menggunakan jQuery, mungkin pustaka JavaScript yang paling umum digunakan (walaupun ada juga yang perlu diselidiki)

(Perhatikan bahwa

document.getElementById("MyElement").className = "MyClass";

_6 di sini adalah objek jQuery. )

Mengubah Kelas dengan jQuery

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Selain itu, jQuery menyediakan pintasan untuk menambahkan kelas jika tidak berlaku, atau menghapus kelas yang berlaku

Bagaimana cara menggunakan perubahan dalam JavaScript?

Acara perubahan JavaScript .

Untuk menggunakan change event pada elemen JavaScript, kita perlu menambahkan metode event handler yang dapat kita gunakan addEventListener() atau atribut onChange dari elemen tersebut. .

metode addEventListener()

atribut onChange

Menggunakan perubahan acara pada elemen input sebagai teks

Bagaimana cara mengubah input dalam JavaScript?

Properti Nilai Teks Input .

Mengubah nilai bidang teks. getElementById("Teksku"). .

Dapatkan nilai bidang teks. getElementById("Teksku"). .

Daftar dropdown dalam formulir. var mylist = dokumen. .

Daftar dropdown lainnya. var no = dokumen. .

Contoh yang menunjukkan perbedaan antara properti defaultValue dan value

Apa arti perubahan dalam JavaScript?

Definisi dan Penggunaan . Catatan. Untuk menu tertentu, peristiwa perubahan terjadi saat opsi dipilih. Untuk bidang teks atau area teks, peristiwa perubahan terjadi saat bidang kehilangan fokus, setelah konten diubah. The change() method triggers the change event, or attaches a function to run when a change event occurs. Note: For select menus, the change event occurs when an option is selected. For text fields or text areas, the change event occurs when the field loses focus, after the content has been changed.

Bagaimana cara mengubah atribut dengan JavaScript?

Untuk mengubah nilai atribut suatu elemen, kita perlu mengakses elemen tersebut dalam JavaScript baik menggunakan id elemen, nama kelas, atau cara lainnya. Kita dapat mengakses atribut menggunakan. attribute_name, dan berikan nilai baru padanya .

kode javascript