JavaScript menyembunyikan/menampilkan elemen

Anda juga dapat menggunakan kode ini untuk menampilkan/menyembunyikan unsur-unsur:

document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";

Catatan perbedaan antara gaya.visibilitas dan gaya.display adalah ketika menggunakan visibility:hidden tidak seperti display:none, tag tidak terlihat, tapi ruang yang dialokasikan untuk itu pada halaman. Tag ini diberikan, itu hanya isn't dilihat di halaman.

Melihat ini link untuk melihat perbedaan.

Saya ingin menyarankan anda JQuery pilihan.

$("#item").toggle();
$("#item").hide();
$("#item").show();

Misalnya:

$(document).ready(function(){
   $("#item").click(function(event){
     //Your actions here
   });
 });

Saya akan menyarankan ini untuk menyembunyikan elemen (seperti orang lain telah disarankan):

document.getElementById(id).style.display = 'none';

Tetapi untuk membuat unsur-unsur yang terlihat, aku'd sarankan ini (bukan display = 'blok'):

document.getElementById(id).style.display = '';

Alasannya adalah bahwa menggunakan display = 'blok' yang menyebabkan tambahan margin/spasi di samping elemen yang dibuat terlihat di kedua IE (11) dan Chrome (Versi 43.0.2357.130 m) pada halaman I'm bekerja pada.

Ketika anda pertama kali memuat halaman di Chrome, elemen tanpa atribut style akan muncul seperti ini di masa DOM inspector:

element.style {
}

Bersembunyi dengan menggunakan JavaScript standar membuat hal ini, seperti yang diharapkan:

element.style {
  display: none;
}

Sehingga terlihat lagi menggunakan display = 'blok' perubahan ini:

element.style {
  display: block;
}

Yang tidak sama seperti awalnya. Ini bisa sangat baik tidak membuat perbedaan dalam sebagian besar kasus. Namun dalam beberapa kasus, itu tidak memperkenalkan kelainan.

Menggunakan display = '' tidak mengembalikannya ke keadaan semula dalam DOM inspector, sehingga tampaknya seperti pendekatan yang lebih baik.

anda dapat menggunakan properti tersembunyi dari unsur:

document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false

Anda harus berpikir JS untuk perilaku, dan CSS untuk visual permen sebanyak mungkin. Dengan mengubah HTML anda sedikit :

<td class="post">
    <a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
    <span id="answer1" class="post-answer">
       <textarea rows="10" cols="115">

Meskipun pertanyaan ini sudah dijawab berkali-kali sebelumnya, saya pikir saya akan menambahkan untuk itu dengan lebih lengkap dan padat menjawab untuk pengguna di masa depan. Jawaban utama tidak memecahkan masalah, tetapi saya percaya itu mungkin lebih baik untuk mengetahui/memahami beberapa macam cara untuk menampilkan/menyembunyikan sesuatu.

.

Mengubah tampilan menggunakan css()

Ini adalah cara saya digunakan untuk melakukan hal itu sampai saya menemukan beberapa cara lain.

Javascript:

$("#element_to_hide").css("display", "none");  // To hide
$("#element_to_hide").css("display", "");  // To unhide

Pro:

• Jangat dan unhides. Yang's tentang hal itu.

Cons:

• Jika anda menggunakan "display" atribut untuk sesuatu yang lain, anda akan harus hardcode nilai apa itu sebelum bersembunyi. Jadi jika anda punya "inline", anda akan memiliki untuk melakukan $("#element_to_hid").css("display", "inline"); jika tidak itu akan menjadi default kembali ke "blok" atau apapun yang lain yang itu akan dipaksa ke dalam.
• Cocok untuk kesalahan ketik.

Contoh: https://jsfiddle.net/4chd6e5r/1/

.

Mengubah tampilan menggunakan addClass()/removeClass()

Saat menyiapkan contoh untuk yang satu ini, saya benar-benar berlari ke dalam beberapa kelemahan pada metode ini yang membuatnya sangat sangat bisa diandalkan.

Css/Javascript:

.hidden {display:none}
$("#element_to_hide").addClass("hidden");  // To hide
$("#element_to_hide").removeClass("hidden");  // To unhide

Pro:

• Menyembunyikan....kadang-kadang. Lihat p1 pada contoh.
• Setelah unhiding, itu akan kembali kembali untuk menggunakan tampilan sebelumnya nilai....kadang-kadang. Lihat p1 pada contoh.
• Jika anda ingin mengambil semua benda tersembunyi, anda hanya perlu melakukan $(".tersembunyi").

Cons:

• Tidak menyembunyikan jika menampilkan nilai set langsung pada html. Lihat p2 pada contoh.
• Tidak menyembunyikan jika layar diatur dalam javascript menggunakan css(). Lihat p3 pada contoh.
• Sedikit kode yang lebih karena anda harus menentukan atribut css.

Contoh: https://jsfiddle.net/476oha8t/8/

.

Mengubah tampilan menggunakan toggle()

Javascript:

$("element_to_hide").toggle();  // To hide and to unhide

Pro:

• Selalu bekerja.
• Memungkinkan anda untuk tidak perlu khawatir tentang apa yang negara itu sebelum beralih. Yang jelas gunakan untuk ini adalah untuk....tombol toggle.
• Pendek dan sederhana.

Cons:

• Jika anda perlu tahu mana negara itu beralih ke dalam rangka untuk melakukan sesuatu yang tidak secara langsung berhubungan, anda harus menambahkan kode (if statement) untuk mengetahui keadaan lebih dalam.
• Mirip dengan yang sebelumnya con, jika anda ingin menjalankan sebuah set instruksi yang berisi toggle() untuk tujuan menyembunyikan, tapi anda don't tahu apakah itu sudah tersembunyi, anda harus menambahkan check (if statement) untuk mengetahui lebih dulu dan jika itu sudah tersembunyi, kemudian melompat. Lihat p1 contoh.
• Terkait dengan sebelumnya 2 kontra, menggunakan toggle() untuk sesuatu yang khusus menyembunyikan atau secara khusus menunjukkan, dapat membingungkan untuk orang lain yang membaca kode anda karena mereka tidak tahu ke arah mana mereka akan beralih.

Contoh: https://jsfiddle.net/cxcawkyk/1/

.

Mengubah tampilan menggunakan hide()/show()

Javascript:

$("#element_to_hide").hide();  // To hide
$("#element_to_hide").show();  // To show

Pro:

• Selalu bekerja.
• Setelah unhiding, itu akan kembali kembali untuk menggunakan tampilan sebelumnya nilai.
• Anda akan selalu tahu di mana anda bertukar dengan begitu anda:

1. don't perlu menambahkan pernyataan if untuk memeriksa visibilitas sebelum mengubah serikat jika negara penting.
2. won't membingungkan orang lain yang membaca kode anda untuk negara anda beralih ke jika, jika urusan negara.

• Intuitif.

Cons:

• Jika anda ingin meniru beralih, anda akan memiliki untuk memeriksa keadaan pertama dan kemudian beralih ke negara lain. Menggunakan toggle() bukan untuk ini. Mengacu pada p2 dari contoh.

Contoh: https://jsfiddle.net/k0ukhmfL/

.

Secara keseluruhan, saya akan mengatakan yang terbaik untuk menyembunyikan()/show() kecuali anda secara khusus perlu untuk menjadi beralih. Saya harap anda menemukan informasi ini dapat membantu.

Hanya buat menyembunyikan dan menampilkan metode-metode sendiri untuk semua unsur-unsur, sebagai berikut

Element.prototype.hide = function() {
    this.style.display = 'none';
}
Element.prototype.show = function() {
    this.style.display = '';
}

Setelah ini, anda dapat menggunakan metode yang biasa elemen pengenal seperti pada contoh berikut:

document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();

atau:

Saya merekomendasikan Javascript, karena ukurannya yang relatif cepat dan lebih mudah dibentuk.

    <script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>

<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115">

Jika anda menggunakan ini dalam meja gunakan ini :-

  <script type="text/javascript">
   function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'table-row';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}
</script>

<td class="post">

<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115">