Menambah dan menghapus atribut gaya dari div dengan jquery

103

Saya telah mewarisi proyek yang sedang saya kerjakan dan saya memperbarui beberapa animasi jquery (sangat sedikit latihan dengan jquery).

Saya memiliki div yang perlu saya tambahkan dan hapus atribut gaya dari. Inilah div:

<div id='voltaic_holder'>

Pada satu titik dalam animasi saya perlu menambahkan gaya padanya:

<div id='voltaic_holder' style='position:absolute;top:-75px'>

Saya telah mencari-cari dan menemukan .removeAttr()metode ini tetapi saya tidak dapat melihat bagaimana cara menambahkannya, atau bahkan bagian-bagiannya yang jauh (seperti bagian atas: -75px saja).

Terima kasih,

jquery css dhtml IniDiucapkan
sumber
$('voltaic_holder').style = nullmungkin? Gaya memiliki seluruh pohon objeknya sendiri. kebanyakan atribut lainnya hanyalah data jenis kunci = nilai.
Marc B

Jawaban:

246

Anda dapat melakukan salah satu dari berikut ini

Tetapkan setiap properti gaya satu per satu:

$("#voltaic_holder").css("position", "relative");

Setel beberapa properti gaya sekaligus:

$("#voltaic_holder").css({"position":"relative", "top":"-75px"});

Hapus gaya tertentu:

$("#voltaic_holder").css({"top": ""});
// or
$("#voltaic_holder").css("top", "");

Hapus seluruh atribut gaya:

$("#voltaic_holder").removeAttr("style")
Adam Albrecht
sumber
Bisakah saya menambahkan lebih dari 1 properti css per baris? Atau apakah saya harus melakukan satu untuk setiap properti gaya seperti ini: $("#voltaic_holder").css("position", "relative"); $("#voltaic_holder").css("top", "-75");
ItsPronounce
3
Untuk menjawabnya, ya Anda bisa. Cukup gunakan literal objek pada fungsi .css (). Seperti $ ('foo'). Css ({'height': '30px', 'width': '50px'});
Richard Neil Ilagan
@AdamAlbrecht Bagaimana cara menghapus gaya tertentu yang telah saya tambahkan karena di $ ("# voltaic_holder"). RemoveAttr ("style") menghapus semua gaya yang diterapkan yang secara default baru ditambahkan.
3 aturan
21

Untuk sepenuhnya menghapus atribut gaya voltaic_holderspan, lakukan ini:

$("#voltaic_holder").removeAttr("style");

Untuk menambahkan atribut, lakukan ini:

$("#voltaic_holder").attr("attribute you want to add", "value you want to assign to attribute");

Untuk menghapus hanya gaya teratas, lakukan ini:

$("#voltaic_holder").css("top", "");
Peter Olson
sumber
15

Jika Anda menggunakan jQuery, gunakan css untuk menambahkan CSS

$("#voltaic_holder").css({'position': 'absolute',
    'top': '-75px'});

Untuk menghapus atribut CSS

$("#voltaic_holder").css({'position': '',
    'top': ''});
justkt
sumber
Anda tidak dapat menghapus posisi atau atribut teratas dari elemen voltaic_holder, karena tidak memiliki atribut thos. Itu adalah properti css yang ditentukan dalam atribut style.
Peter Olson
@Peter - doh! Diedit untuk digunakan.css
justkt
10

Cara mudah untuk menangani ini (dan solusi HTML terbaik untuk boot) adalah dengan mengatur kelas yang memiliki gaya yang ingin Anda gunakan. Maka itu masalah sederhana menggunakan addClass () dan removeClass () , atau bahkan toggleClass () .

$('#voltaic_holder').addClass('shiny').removeClass('dull');

atau bahkan

$('#voltaic_holder').toggleClass('shiny dull');
Mimpi yang Nyata
sumber
2

Dalam kasus metode .css di jQuery for ! Important Aturan tidak akan berlaku.

Dalam hal ini kita harus menggunakan fungsi .attr .

Sebagai Contoh: Jika Anda ingin menambahkan gaya seperti di bawah ini:

<div id='voltaic_holder' style='position:absolute;top:-75px !important'>

Kamu harus menggunakan:

$("#voltaic_holder").attr("style", "position:absolute;top:-75px !important");

Semoga membantu seseorang.

Adiyya Tadikamalla
sumber
1

Hapus atribut gaya dari div menggunakan kueri J:

$("#TableDiv").removeAttr("style");

Tambahkan gaya ke div menggunakan kueri J:

$("#TableDiv").attr("style", "display: none;");

Tambahkan gaya menggunakan html:

<div class="row" id="TableDiv" style="display: none;">
</div>

Semoga bermanfaat :)

Wajid khan
sumber