jQuery를 사용하여 CSS "top" 및 "left" 특성 제거

jQuery를 사용하여 CSS "top" 및 "left" 특성 제거

드래그 가능한 맵을 만드는 중입니다. 맵을 끌면 요소에 각각의 값이 있는 '왼쪽' 및 '위' 속성이 지정됩니다.

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

div의 인라인 스타일에서 상단 및 왼쪽 속성을 제거하고 싶은 버튼이 있는데, jquery로 이것이 가능한가요?

위쪽 및 왼쪽 특성을 제거하고 다른 특성은 남겨두려면 다음 작업을 수행할 수 있습니다.

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

또는 더 짧은 등가물:

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

CSS 및 의 기본값은 다음과 같습니다.auto따라서 이를 설정하는 것은 수행하려는 작업에 따라 동일합니다.

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

당신은 또한 완전히 제거할 수 있는 옵션이 있습니다.style속성:

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

그러나 다른 jQuery UI 구성 요소를 사용하는 경우 제거하지 않을 인라인 스타일이 필요할 수 있으므로 주의하여 계속 진행하십시오.

의 모든 내용을 제거할 수 있습니다.style다음을 수행하여 속성 지정:

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

그리고 특정 정보를 제거할 수 있습니다.styles 수행:

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

CSS 속성을 빈 문자열로 설정하기만 하면 됩니다. 예를 들어 다음 코드를 사용합니다.

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

CSS에 대한 jQuery 설명서를 참조하십시오.

1. 이동: jQuery API
2. Ctrl + F('제거')
3. 읽기:

스타일 속성 값을 빈 문자열(예: $("#mydiv")로 설정하면 HTML 스타일 속성, jQuery의 .css() 메서드를 통해 또는 스타일 속성의 직접 DOM 조작을 통해 이미 직접 적용된 경우 해당 속성이 요소에서 제거됩니다.

이 문서들은 여러분이 달성하고자 하는 것에 대한 현재의 권장 접근 방식을 제공합니다. 이는 여러분이 스택 오버플로에서 불꽃 전쟁을 앞뒤로 읽을 필요가 없기 때문에 종종 시간을 절약할 수 있습니다(얼마나 재미있든 간에!).

이 JQuery 버그 보고서에 따라

요소.removeAttr('style')

doesn't work consistently in Webkit based browsers. For example, I ran across this problem on iOS 6.1. The fix is to use:

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

제 생각에 가장 깨끗한 방법은 어떤 종류의 null/zero/default 값으로 속성을 덮어쓰는 대신 요소의 CSSStyleDeclaration에서 속성을 완전히 제거하는 것입니다.

$(".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'). 제거Css('color');

쉽게 제거할 수 없는 스타일이 있습니다.(생각나는 대로)

해결 방법은 두 개의 다른 클래스를 만들고 원하는 스타일을 포함하는 클래스를 추가/제거하는 것입니다.

쉽게 제거/비활성화할 수 있는 스타일 속성에는 최적의 솔루션이 아닙니다.

CSS 스타일을 제거하려면 스타일에 빈 문자열을 할당합니다.

이 경우에는

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

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

언급URL : https://stackoverflow.com/questions/9398870/remove-css-top-and-left-attributes-with-jquery