Удалить атрибуты CSS "сверху" и "слева" с помощью jQuery

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

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

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

Ответы

Ответ 1

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

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

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

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

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

Ответ 2

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

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

Или более короткий эквивалент:

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

Ответ 3

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

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

И вы можете удалить конкретный style, выполнив:

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

Ответ 4

Просто установите свойство CSS пустой строкой, например, со следующим кодом:

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

См. Документация jQuery для CSS.

Ответ 5

  • Перейдите сюда: jQuery API
  • Ctrl + F для 'remove'
  • Читайте:

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

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

Ответ 6

Per этот отчет об ошибке JQuery 

element.removeAttr('style')
не работает последовательно в браузерах на основе Webkit. Например, я столкнулся с этой проблемой на iOS 6.1. Исправление состоит в том, чтобы использовать: 
element.attr('style', '')

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

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

Ответ 12

Чтобы удалить стили css, присвойте пустую строку стилю

в этом случае

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

Ответ 13

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

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