Cómo saber si un elemento tiene un ancho fluido

Posible duplicado:
Determine si el elemento tiene ancho fijo o porcentual usando JavaScript

Necesito saber si un elemento tiene un ancho fluido o no. Puedo entrar en detalles sobre por qué si realmente lo necesito, pero no creo que sea así.

Básicamente, ¿el elemento N% width o Npx|pt|em|etc width? En este momento solo veo forms de get el ancho actual calculado. Por lo tanto, incluso si un elemento tiene un ancho del 100%, se obtiene el valor en JS, como 500px o el ancho que tenga en ese momento.

¿Hay algún truco o API JS que desconozco para saber esto o para get el valor CSS original?

Además, por favor, no jQuery. Esto es para una biblioteca JS mía.

3 Solutions collect form web for “Cómo saber si un elemento tiene un ancho fluido”

Necesita usar window.getComputedStyle para los browseres que lo soportan, y element.currentStyle para aquellos que lo admitan. O puede usar jQuery $(element).css('width') que debe abstraer la diferencia (aunque no he probado el último) .

Parece que lo siguiente no hace lo que pensé que sería, al less no para ancho y alto. Después de search, encontré esta otra pregunta SO en la que se afirma que es imposible (al less no sin analizar la hoja de estilo ?!) . Me parece una locura, seguiré buscando por si acaso.

get el valor porcentual de la regla de CSS en jQuery

 if( window.getComputedStyle ) { value = window.getComputedStyle(element,null).width; } else if( element.currentStyle ) { value = element.currentStyle.width; } 

actualizar

¡He descubierto que esto funciona …! pero solo para firefox 🙁 Para mí tendría sentido que si el elemento no tiene nada para calcular su ancho contra (es decir, no es parte del flujo de documentos) debe devolver su valor original:

 function isElementFluid(elm){ var clone = elm.cloneNode(false); if( window.getComputedStyle ) { value = window.getComputedStyle(clone,null).width; } else if( clone.currentStyle ) { value = clone.currentStyle.width; } return (value && String(value).indexOf('%') != -1 ); } 

(no ha probado para IE)

Una vez más, otro ejemplo de que estoy de acuerdo con la implementación de FireFox y fruncir el ceño a Chrome o Safari.

actualización 2

Ok, no soy un fanático de ser derrotado por las computadoras;) así que he tenido esta function, totalmente exagerada, pero parece funcionar. Una vez más, todavía tengo que probar esto en IE ya que no tengo una máquina con Windows a mano en este momento. Es molesto cuando la versión original de FF es bastante breve, pero la lógica aquí es el sonido: se trata de lo que haría un humano normal en las testings si algo es elástico.

 function isElementFluid(elm){ var wrapper, clone = elm.cloneNode(false), ow, p1, p2; if( window.getComputedStyle ) { value = window.getComputedStyle(clone,null).width; } else if( clone.currentStyle ) { value = clone.currentStyle.width; } /// the browsers that fail to work as Firefox does /// return an empty width value, so here we fall back. if ( !value ) { /// remove styles that can get in the way clone.style.margin = '0'; clone.style.padding = '0'; clone.style.maxWidth = 'none'; clone.style.minWidth = 'none'; /// create a wrapper that we can control, my reason for /// using an unknown element is that it stands less chance /// of being affected by stylesheets - this could be improved /// to avoid possible erroneous results by overriding more css /// attributes with inline styles. wrapper = document.createElement('wrapper'); wrapper.style.display = 'block'; wrapper.style.width = '500px'; wrapper.style.padding = '0'; wrapper.style.margin = '0'; wrapper.appendChild(clone); /// insert the element in the same location as our target elm.parentNode.insertBefore(wrapper,elm); /// store the clone's calculated width ow = clone.offsetWidth; /// change the wrapper size once more wrapper.style.width = '600px'; /// if the new width is the same as before, most likely a fixed width if( clone.offsetWidth == ow ){ /// tidy up elm.parentNode.removeChild(wrapper); return false; } /// otherwise, calculate the percentages each time - if they /// match then it's likely this is a fluid element else { p1 = Math.floor(100/500*ow); p2 = Math.floor(100/600*clone.offsetWidth); /// tidy up elm.parentNode.removeChild(wrapper); return (p1 == p2) ? Math.round(p1)+'%' : false; } } else { p1 = (value && String(value).indexOf('%') != -1); return p1 ? value : false; } } 

Puede recuperar el valor de CSS con:

 element.style.width 

que regresará:

 auto: el browser establece el ancho.  Esto es pnetworkingeterminado
 longitud: define el ancho en unidades de longitud
 % - Define el ancho en% del elemento padre
 inherit: el valor de la propiedad width se henetworkinga del elemento primario

Devuelve valores pegados de: http://www.w3schools.com/jsref/prop_style_width.asp

creo que lo que estás buscando es

  getComputedStyle 

no es compatible con IE8 y versiones posteriores, pero puedes emularlo. IE ver: http://snipplr.com/view/13523/

  • ¿Existe una propiedad CSS para definir el desbordamiento de selección?
  • Añadir barra de desplazamiento a una página que no lo necesita?
  • Implementación del espacio de nombres de tags personalizadas en HTML5
  • Cargue un CSS externo para un DIV específico
  • ¿Cómo get el valor de los padres en un iframe?
  • Obtener text seleccionado a exception de elementos no seleccionables
  • href provoca la recarga involuntaria de la página con Angularjs y Twitter Bootstrap
  • Habilitar IntelliJ hotswap de files html y javascript
  • jquery $ ('id'). text con negrita
  • Simular evento de desplazamiento en iPad
  • analizar decimales en un lapso
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.