Detección de ancho: automático en jQuery

Question

Estoy recuperando el ancho de elementos usando jQuery y lo preferiría si pudiera tener una indicación de si había un ancho (y una altura) explícitos especificados.

<div id="test"></div> 
<script type="text/javascript"> 
$(function() { alert($('#test').css('width')); }); 
</script> 

Esto alertará el ancho implícito del div en términos de cuántos píxeles ocupa en la pantalla del cliente. ¿Hay alguna forma de que, si falta el ancho o se establece como width: auto, se puede verificar con jQuery?

Es decir, en lugar de que el ejemplo anterior devuelva un entero, devolvería auto o undefined. O, alternativamente, ¿existe un equivalente de una función isAuto?

Answer 1

No creo que sea posible por el momento. Al menos no en otro navegador que no sea IE. IE implementa element.currentStyle que representa los estilos en que fueron escritos en el archivo CSS. Por otro lado, el resto de los exploradores implementan window.getComputedStyle, que devuelve valores calculados de esos estilos. Eso es lo que recibes allí, un valor numérico en lugar de automático.

La única forma de evitarlo sería analizar las declaraciones de CSS desde document.styleSheets.

Referencias:

• http://msdn.microsoft.com/en-us/library/ms535231(VS.85).aspx
• https://developer.mozilla.org/en/DOM:window.getComputedStyle
• https://developer.mozilla.org/en/CSS/computed_value

Answer 2

No estoy seguro de si estoy respondiendo su pregunta correctamente, pero si usa width() function, obtendrá un número entero que representa el ancho en píxeles.

Answer 3

1. función Crear
2. pase elemento css ID para funcionar
3. escribir un caso en el comunicado que se lleva a cabo en la propiedad ancho de la Identificación del elemento

NOTA: para usar en Mulitple elementos sería aconsejable utilizar un bucle con una serie de nombres de elementos

Answer 4

$('#test')[0].style.width=="auto" debería funcionar: http://jsfiddle.net/KxTLE/ http://jsfiddle.net/KxTLE/1/ y Trate

jQuery.fn.isAuto=function() { 
if(this[0]) { 
    var ele=$(this[0]); 
    if(this[0].style.width=='auto' || ele.outerWidth()==ele.parent().width()) { 
     return true; 
    } else { 
     return false; 
    } 
} 
return undefined; 
}; 

y ejemplo: http://jsfiddle.net/KxTLE/6/

Answer 5

Hasta donde yo sé, no existe una función jQuery nativa para detectar anchos o alturas automáticos. Entonces escribí un complemento para hacerlo.

$.fn.isAuto = function(dimension){ 
    if (dimension == 'width'){ 
     var originalWidth = this.innerWidth(); 
     var marginLeft = parseInt(this.css('margin-left')); 
     var testMarginWidth = marginLeft+50; 
     this.css('margin-left', testMarginWidth); 
     var newWidth = this.innerWidth(); 
     this.css('margin-left', marginLeft); 
     if(newWidth<originalWidth){ 
      return true;  
     } 
     else{ 
      return false; 
     } 
    } 
    else if(dimension == 'height'){ 
     var originalHeight = this.height(); 
     this.append('<div id="test"></div>'); 
     var testHeight = originalHeight+500; 
     $('#test').css({height: testHeight}); 
     var newHeight = this.height(); 
     $('#test').remove(); 
     if(newHeight>originalHeight){ 
      return true;  
     } 
     else{ 
      return false; 
     } 
    } 
}; 

Originalmente, lo había escrito para hacer la altura, por lo que acabo de ampliar para incluir el ancho.Que acaba de llamar así:

$('#element').isAuto('width'); 

o

$('#element').isAuto('height'); 

Aquí es una fiddle demostrar la funcionalidad del plugin.

Answer 6

Esto obtendrá la cadena "auto" o "180px" en valores absolutos.

$('element').prop('style').width 

para la anchura o

$('element').prop('style').height 

para la altura.