ejemplos - jquery selector

Elimine los atributos CSS "superior" e "izquierda" con jQuery

Question

Estoy construyendo un mapa arrastrable que cuando se arrastra el mapa, el elemento recibe un atributo ''izquierda'' y ''superior'' con valores para cada uno como tal ...

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

Tengo un botón que quiero eliminar el atributo superior e izquierdo del estilo en línea en el div al hacer clic, ¿es posible con jquery?

Answer 1

1. Vaya aquí: api.jquery.com/css
2. Ctrl + F para ''eliminar''
3. Leer:

Establecer el valor de una propiedad de estilo en una cadena vacía, por ejemplo $ ("#mydiv") .css ("color", "") - elimina esa propiedad de un elemento si ya se ha aplicado directamente, ya sea en el estilo HTML atributo, a través del método .css () de jQuery, o mediante la manipulación DOM directa de la propiedad de estilo.

Los documentos te dan el enfoque actual y recomendado para lo que intentas lograr, lo que a menudo puede ahorrarte tiempo porque no tienes que leer guerras de llama en desbordamiento de pila (sin importar lo divertido / iluminador que pueda ser !).

Answer 2

En mi opinión, la forma más limpia es eliminar la propiedad completamente de la CSSStyleDeclaration del elemento, en lugar de sobrescribirla con algún tipo de valor nulo / cero / predeterminado:

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

Answer 3

Hay algunos estilos que no se pueden eliminar fácilmente. (El desbordamiento viene a la mente)

Una solución alternativa sería crear 2 clases diferentes y agregar / eliminar la que contenga el estilo que desee.

NO es la mejor solución para las propiedades de estilo que pueden eliminarse / deshabilitarse fácilmente.

Answer 4

Los valores predeterminados para CSS top y a la left son auto , por lo que establecerlos en eso podría ser equivalente según lo que esté intentando hacer:

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

También tiene la opción de eliminar por completo el atributo de style :

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

Sin embargo, si está utilizando otros componentes de la interfaz de usuario de jQuery, estos pueden requerir estilos en línea que no desea que se eliminen, por lo que proceda con precaución.

Answer 5

Para eliminar estilos CSS, asigne una cadena vacía al estilo

en este caso

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

Answer 6

Puede eliminar todos los contenidos en el atributo de style haciendo:

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

Y puedes eliminar style específico s haciendo:

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

Answer 7

Según este informe de errores de JQuery

element.removeAttr(''style'') no funciona de manera consistente en los navegadores basados ​​en Webkit. Por ejemplo, encontré este problema en iOS 6.1. La solución es usar:

element.attr(''style'', '''')

Answer 8

Si desea eliminar específicamente los atributos superiores e izquierdos y dejar otros, puede hacer esto:

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

O, un equivalente más corto:

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

Answer 9

Si desea eliminar todo lo que puede hacer

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

Answer 10

Simplemente configure la propiedad CSS con una cadena vacía, por ejemplo con el siguiente código:

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

Consulte la api.jquery.com/css .

Answer 11

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

Answer 12

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

}

luego, si quieres eliminar css prop (s):

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

Answer 13

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

}

Eliminar de forma segura con este complemento!

$ (''myDiv''). removeCss (''color'');