Удалите CSS «top» и «left» атрибуты с помощью jQuery

Я создаю перетаскиваемую карту, чтобы при перетаскивании карты элементу давали атрибуты left и top со значениями для каждого, как ...

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

У меня есть кнопка, с помощью которой я хочу удалить верхний и левый атрибут из встроенного стиля в div при нажатии. Возможно ли это с помощью jquery?

Значения по умолчанию для CSS topи leftтаковы auto, поэтому их установка может быть эквивалентной в зависимости от того, что вы пытаетесь сделать:

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

У вас также есть возможность полного удаления styleатрибута:

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

Однако, если вы используете другие компоненты пользовательского интерфейса jQuery, для них могут потребоваться встроенные стили, которые вы не хотите удалять, поэтому действуйте с осторожностью.

Если вы хотите специально удалить атрибуты top и left и оставить другие, вы можете сделать это:

$('.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. Перейдите сюда: API jQuery
2. Ctrl + F для удаления
3. Читать:

Установка значения свойства стиля в пустую строку - например, $ ("#mydiv") .css ("color", "") - удаляет это свойство из элемента, если оно уже было применено напрямую, будь то в стиле HTML атрибута, с помощью метода jcuery .css () или прямого DOM-манипулирования свойством style.

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

За этот отчет об ошибке JQuery

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

element.attr ('style', '')

Если вы хотите удалить все это, вы можете сделать

$('.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 ( 'цвет').

Есть несколько стилей, которые не могут быть легко удалены. (Переполнение приходит на ум)

Обходной путь - создать 2 разных класса и добавить / удалить тот, который содержит нужный вам стиль.

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

Для удаления стилей CSS назначьте пустую строку стилю

в таком случае

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

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