ลบ CSS "ด้านบน" และ "ซ้าย" คุณสมบัติด้วย jQuery

ฉันกำลังสร้างแผนที่ที่สามารถลากได้ซึ่งเมื่อลากแผนที่องค์ประกอบจะได้รับแอตทริบิวต์ 'ด้านซ้าย' และ 'ด้านบน' พร้อมค่าสำหรับแต่ละรายการดังนั้น ...

<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 UI อื่น ๆ สิ่งเหล่านั้นอาจต้องมีสไตล์แบบอินไลน์ที่คุณไม่ต้องการที่จะถูกลบออกไปดังนั้นให้ดำเนินการด้วยความระมัดระวังที่นั่น

หากคุณต้องการลบคุณลักษณะด้านบนและด้านซ้ายออกเป็นพิเศษและปล่อยให้คนอื่น ๆ คุณสามารถทำได้:

$('.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 คุณลักษณะผ่านวิธี. css () ของ jQuery หรือผ่านการจัดการ DOM โดยตรงของคุณสมบัติสไตล์

เอกสารให้แนวทางที่เป็นปัจจุบันแก่คุณในสิ่งที่คุณกำลังพยายามทำให้สำเร็จซึ่งมักจะช่วยคุณประหยัดเวลาเพราะคุณไม่จำเป็นต้องอ่านไปมาในกองเพลิงบนกองล้น (ไม่ว่าสนุก / รู้แจ้งก็ตาม) !)

ต่อรายงานบั๊ก 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:

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