Bagaimana cara menambahkan `style = display:“ block ”` ke suatu elemen menggunakan jQuery?

207

Bagaimana cara menambah style=display:"block"elemen di jQuery?

Some one
sumber

Jawaban:

346
$("#YourElementID").css("display","block");

Sunting: atau seperti yang ditunjukkan dalam komentarnya di bawah ini, Anda dapat melakukan ini juga:

$("#YourElementID").css({ display: "block" });
Colin Brock
sumber
21
atau.css({ display: "block" });
dave thieben
8
@dave - atau .css({ "display": "block" });hanya untuk hubungan pendek masalah yang disebabkan oleh displayvariabel. - JSLint akan menolak versi tanpa tanda kutip. ( github.com/douglascrockford/JSLint/issues/110 )
Peter Ajtai
Tugas Json-esque berguna untuk mengirimkannya ke pipa. Saya suka ini.
Luis Robles
35

Tergantung pada tujuan pengaturan properti tampilan, Anda mungkin ingin melihatnya

$("#yourElementID").show()

dan

$("#yourElementID").hide()
Desain oleh Adrian
sumber
27

Ada beberapa fungsi untuk melakukan pekerjaan ini yang ditulis di bawah berdasarkan prioritas.

Tetapkan satu atau lebih properti CSS untuk set elemen yang cocok.

$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
  display: "block",
  color: "red",
  ...
})

Tampilkan elemen yang cocok dan kira-kira setara dengan panggilan.css("display", "block")

Anda dapat menampilkan elemen menggunakan .show()sebagai gantinya

$("div").show()

Tetapkan satu atau lebih atribut untuk set elemen yang cocok.

Jika elemen target tidak memiliki styleatribut , Anda dapat menggunakan metode ini untuk menambahkan gaya inline ke elemen.

$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")

  • JavaScript

Anda dapat menambahkan properti CSS spesifik ke elemen menggunakan javascript murni , jika Anda tidak ingin menggunakan jQuery.

var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red"; 
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Mohammad
sumber
11

Jika Anda perlu menambahkan beberapa, Anda dapat melakukannya seperti ini:

$('#element').css({
    'margin-left': '5px',
    'margin-bottom': '-4px',
    //... and so on
});

Sebagai praktik yang baik saya juga akan meletakkan nama properti di antara tanda kutip untuk memungkinkan tanda hubung karena sebagian besar gaya memiliki tanda hubung di dalamnya. Jika itu adalah 'tampilan', maka kutipan adalah opsional tetapi jika Anda memiliki tanda hubung, itu tidak akan berfungsi tanpa tanda kutip. Bagaimanapun, untuk membuatnya sederhana: selalu lampirkan dalam tanda kutip.

CodingYoshi
sumber