Im создавая перетаскиваемую карту, когда при перетаскивании карты элемент получает атрибут "left" и "top" со значениями для каждого из них так...
<div class="map" style="top:200px; left:100px;">Map</div>
У меня есть кнопка, в которой я хочу удалить атрибут top и left из встроенного стиля в 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');
И вы можете удалить конкретный style, выполнив:
$('.map').css('top', '');
$('.map').css('left', '');
Просто установите свойство CSS пустой строкой, например, со следующим кодом:
$('#mydiv').css('color', '');
Установка значения свойства style в пустую строку - например. $( "#mydiv" ).css( "color", "") - удаляет это свойство из элемента если он уже был применен непосредственно, будь то в стиле HTML атрибут через метод jQuery.css() или через прямой DOM манипуляции с свойством style.
Документы дают вам текущий рекомендованный подход к тому, что вы пытаетесь выполнить, что часто может сэкономить ваше время, потому что вам не нужно читать назад и вперед пламенные войны при переполнении стека (независимо от того, насколько интересно/просвещать это может быть!).
Per этот отчет об ошибке JQuery
element.removeAttr('style') не работает последовательно в браузерах на основе Webkit. Например, я столкнулся с этой проблемой на iOS 6.1. Исправление состоит в том, чтобы использовать: 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();
$.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 разных класса и добавить/удалить тот, который содержит желаемый стиль.
НЕ лучшее решение для свойств стиля, которое можно легко удалить/отключить.
$("#map").css("top", "0");
$("#map").css("left", "0");
Чтобы удалить стили css, присвойте пустую строку стилю
в этом случае
$('.map').css({top:'',left:''});
На мой взгляд, самый чистый способ - полностью удалить свойство из элемента CSSStyleDeclaration, вместо того чтобы просто переписать его каким-то образом значения null/zero/default:
$(".foo").prop("style").removeProperty("top");
$(".foo").prop("style").removeProperty("left");
$(".foo").prop("style").removeProperty("background-color");