Hapus atribut "atas" dan "kiri" CSS dengan jQuery

Saya sedang membangun peta yang dapat diseret yang ketika peta diseret elemen diberi atribut 'kiri' dan 'atas' dengan nilai untuk masing-masing begitu ...

<div class="map" style="top:200px; left:100px;">Map</div>

Saya memiliki tombol yang ingin saya hapus atribut atas dan kiri dari gaya inline pada div ketika diklik, Apakah ini mungkin dengan jquery?

Nilai default untuk CSS topdan leftsedang auto, jadi mengaturnya ke yang mungkin setara tergantung pada apa yang Anda coba lakukan:

$('.map').css('top', 'auto').css('left', 'auto');

Anda juga memiliki opsi untuk menghapus styleatribut sepenuhnya :

$('.map').removeAttr('style');

Namun, jika Anda menggunakan komponen jQuery UI lainnya, itu mungkin memerlukan gaya sebaris yang tidak ingin Anda hapus, jadi lanjutkan dengan hati-hati di sana.

Jika Anda ingin secara khusus menghapus atribut atas dan kiri dan meninggalkan yang lain, Anda dapat melakukan ini:

$('.map').css('top', '').css('left', '');

Atau, padanan yang lebih pendek:

$('.map').css({
    'top': '',
    'left': ''
});

Anda dapat menghapus semua konten dalam styleatribut dengan melakukan:

$('.map').removeAttr('style');

Dan Anda dapat menghapus spesifik styledengan melakukan:

$('.map').css('top', '');
$('.map').css('left', '');

Cukup setel properti CSS dengan string kosong, misalnya dengan kode berikut:

$('#mydiv').css('color', '');

Lihat Dokumentasi jQuery di CSS .

1. Buka di sini: API jQuery
2. Ctrl + F untuk 'hapus'
3. Baca:

Menyetel nilai properti style ke string kosong - mis. $ ("#Mydiv") .css ("color", "") - menghapus properti itu dari suatu elemen jika sudah diterapkan secara langsung, baik dalam gaya HTML atribut, melalui metode .css () jQuery, atau melalui manipulasi DOM langsung dari properti style.

Dokumen memberi Anda pendekatan saat ini, yang disarankan untuk apa yang ingin Anda capai, yang sering kali dapat menghemat waktu Anda karena Anda tidak harus membaca bolak-balik perang api pada stack overflow (tidak peduli seberapa menyenangkan / mencerahkan yang mungkin terjadi !).

Per laporan bug JQuery ini

element.removeAttr ('style')

element.attr ('style', '')

Jika Anda ingin menghapus semua itu, Anda bisa melakukannya

$('.map').removeAttr('style');

$.fn.removeCss=function(prop){
   if(!prop){
          return $(this).removeAttr('style').removeAttr('class');
     }
    else{
         return $(this).css(prop,null);
    }

}

maka jika Anda ingin menghapus css prop (s):

    $('#mydiv').removeCss('color');
//To remove all prop Css
    $('#mydiv').removeCss();

Menurut pendapat saya, cara terbersih adalah menghapus properti sepenuhnya dari elemen CSSStyleDeclaration , alih-alih menimpanya dengan semacam nilai nol / nol / standar:

$(".foo").prop("style").removeProperty("top");
$(".foo").prop("style").removeProperty("left");
$(".foo").prop("style").removeProperty("background-color");

$.fn.removeCss=function(toDelete){

    var props=$(this).attr('style').split(';');
var tmp=-1;
for( var p=0;p<props.length; p++){if(props[p].indexOf(toDelete)!==-1){tmp=p}};
if(tmp!==-1){

   delete props[tmp];
}

  return $(this).attr('style',props.join(';')+';');

}

Hapus dengan aman dengan plugin ini!

$ ('myDiv'). removeCss ('color');

Ada beberapa gaya yang tidak dapat dengan mudah dihapus. (Meluap ke pikiran)

Solusinya adalah membuat 2 kelas yang berbeda dan menambah / menghapus yang berisi gaya yang Anda inginkan.

BUKAN solusi terbaik untuk properti gaya yang dapat dengan mudah dihapus / dinonaktifkan.

Untuk menghapus gaya css, berikan string kosong ke gaya

pada kasus ini

$('.map').css({top:'',left:''});

 $("#map").css("top", "0"); 
 $("#map").css("left", "0");