Видаліть атрибути "верхній" та "лівий" CSS за допомогою jQuery

Я будую карту, що перетягується, що при перетягуванні карти елементу надається атрибут 'ліворуч' та 'верх' зі значеннями для кожного так ...

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

У мене є кнопка, якою я хочу видалити верхній і лівий атрибут зі стилю вбудованого тексту на діві при натисканні. Це можливо за допомогою jquery?

Значення за замовчуванням для CSS topі leftє auto, таким чином встановлюючи їх , що може бути еквівалентно в залежності від того, що ви намагаєтеся зробити:

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

Також у вас є можливість повністю видалити styleатрибут:

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

Однак якщо ви використовуєте інші компоненти інтерфейсу jQuery, для них можуть знадобитися стилі вбудовування, які ви не хочете видаляти, тому продовжуйте з обережністю.

Якщо ви хочете спеціально видалити верхній і лівий атрибути та залишити інші, ви можете зробити це:

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

Або коротший еквівалент:

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

Ви можете видалити весь вміст styleатрибута, виконавши:

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

А ви можете видалити конкретні styles, виконавши:

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

Просто встановіть властивість CSS порожнім рядком, наприклад із наступним кодом:

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

Див. Документацію jQuery на CSS .

1. Перейдіть сюди: jQuery API
2. Ctrl + F для "видалити"
3. Прочитайте:

Встановлення значення властивості стилю в порожній рядок - наприклад, $ ("#mydiv") .css ("color", "") - видаляє це властивість з елемента, якщо воно вже було безпосередньо застосовано, будь то в стилі HTML атрибут, через метод .Qss () jQuery's, або через пряме DOM-маніпулювання властивістю стилю.

Документи дають вам сучасний, рекомендований підхід до того, що ви намагаєтеся досягти, що часто може заощадити ваш час, оскільки вам не доведеться читати полум'яні війни при переповненні стека (незалежно від того, якою веселою та просвічуючою це може бути справа). !).

Відповідно до цього звіту про помилки JQuery

element.removeAttr ('стиль')

element.attr ('стиль', '')

Якщо ви хочете видалити все, що ви можете зробити

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

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

}

тоді, якщо ви хочете видалити css prop (s):

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

На мою думку, найчистіший спосіб - повністю видалити властивість з CSSStyleDeclaration елемента , а не просто переписати його з якимось значенням null / zero / default:

$(".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(';')+';');

}

Видаліть безпечно цей плагін!

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

Є деякі стилі, які неможливо легко усунути. (Переповнення приходить на думку)

Приблизним рішенням буде створення двох різних класів та додавання / видалення того, що містить потрібний вам стиль.

НЕ найкраще рішення для властивостей стилю, які можна легко видалити / вимкнути.

Для видалення стилів css призначте стилю порожній рядок

в цьому випадку

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

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