Xóa các thuộc tính hàng đầu CSS và các trang còn lại của CSS với jQuery

Tôi đang xây dựng một bản đồ có thể kéo mà khi bản đồ được kéo, phần tử được cung cấp một thuộc tính 'trái' và 'trên cùng' với các giá trị cho mỗi ...

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

Tôi có một nút mà tôi muốn xóa thuộc tính trên cùng và bên trái khỏi kiểu nội tuyến trên div khi nhấp vào, Điều này có thể với jquery không?

Các giá trị mặc định cho CSS topvà leftlà auto, do đó, đặt chúng thành giá trị đó có thể tương đương tùy thuộc vào những gì bạn đang cố gắng thực hiện:

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

Bạn cũng có tùy chọn loại bỏ hoàn toàn stylethuộc tính:

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

Tuy nhiên, nếu bạn đang sử dụng các thành phần UI jQuery khác, chúng có thể yêu cầu các kiểu nội tuyến mà bạn không muốn xóa, vì vậy hãy thận trọng ở đó.

Nếu bạn muốn loại bỏ cụ thể các thuộc tính trên cùng và bên trái và để lại các thuộc tính khác, bạn có thể thực hiện việc này:

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

Hoặc, tương đương ngắn hơn:

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

Bạn có thể xóa tất cả nội dung trong stylethuộc tính bằng cách thực hiện:

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

Và bạn có thể xóa styles cụ thể bằng cách thực hiện:

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

Chỉ cần đặt thuộc tính CSS bằng một chuỗi rỗng, ví dụ với đoạn mã sau:

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

Xem Tài liệu jQuery trên CSS .

1. Tới đây: API jQuery
2. Ctrl + F để 'xóa'
3. Đọc:

Đặt giá trị của thuộc tính kiểu thành một chuỗi trống - ví dụ $ ("#mydiv") .css ("color", "") - xóa thuộc tính đó khỏi một thành phần nếu nó đã được áp dụng trực tiếp, cho dù theo kiểu HTML thuộc tính, thông qua phương thức .css () của jQuery hoặc thông qua thao tác DOM trực tiếp của thuộc tính style.

Các tài liệu cung cấp cho bạn cách tiếp cận hiện tại, được đề xuất cho những gì bạn đang cố gắng thực hiện, điều này thường có thể giúp bạn tiết kiệm thời gian vì bạn không phải đọc đi đọc lại các cuộc chiến ngọn lửa trên tràn ngăn xếp (cho dù điều đó có thú vị / giác ngộ đến mức nào !).

Mỗi báo cáo lỗi JQuery này

phần tử.removeAttr ('phong cách')

Element.attr ('style', '')

Nếu bạn muốn loại bỏ tất cả, bạn có thể làm

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

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

}

sau đó nếu bạn muốn loại bỏ css prop (s):

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

Theo tôi, cách sạch nhất là loại bỏ hoàn toàn thuộc tính khỏi CSSStyleDeclaration của phần tử , thay vì chỉ ghi đè lên nó bằng một loại giá trị 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(';')+';');

}

Xóa an toàn với plugin này!

$ ('myDiv'). removeCss ('màu');

Có một số kiểu không thể dễ dàng loại bỏ. (Tràn đến tâm trí)

Một cách giải quyết khác là tạo 2 lớp khác nhau và thêm / xóa lớp chứa kiểu bạn muốn.

KHÔNG phải là giải pháp tốt nhất cho các thuộc tính kiểu có thể dễ dàng loại bỏ / vô hiệu hóa.

Để xóa kiểu css, gán một chuỗi rỗng cho kiểu

trong trường hợp này

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

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