jQuery/Javascript css ("ancho")/verificar si el estilo está definido en css?

Question

Tengo una hoja de estilo que define el ancho predeterminado para las imágenes. Cuando leo el estilo de ancho de imagen con jQuery width(), devuelve el ancho correcto. También devuelve el mismo ancho cuando llamo al css("width"). Pero si no hay un ancho definido en la hoja de estilo, la función css("width") también devolverá el valor width() computado, pero no dirá undefined o auto o algo así.

¿Alguna idea de cómo podría averiguar si el estilo está o no definido en el código CSS?

La solución funciona para mí en el navegador. Gracias a todos por ayudar:

$(this).addClass("default_width_check"); 
var width = ($(this).width() == 12345) ? 'none-defined' : $(this).width(); 
var height = ($(this).height() == 12345) ? 'none-defined' : $(this).height(); 
$(this).removeClass("default_width_check"); 

.default_width_check { 
    width: 12345; 
} 

Answer 1

tengo una idea de solución que fuerza de trabajo.

Definir una clase llamada default_widthantes de todas las otras hojas de estilo:

.default_width { width: 1787px } 
/* An arbitrary value unlikely to be an image's width, but not too large 
    in case the browser reserves memory for it */ 

para averiguar si una imagen tiene un conjunto ancho:

• clonarlo en jQuery: element = $("#img").clone()

• dar al elemento clonado la clase default_width: element.addClass("default_width")

• Si su ancho es de 1787px, no tiene ningún ancho establecido, o, por supuesto, tiene una anchura nativa de 1787px, que es el único caso en que este método no funcionará.

No estoy del todo seguro de si esto funcionará, pero podría. Editar: como señala @bobince en los comentarios, deberá insertar el elemento en el DOM para que todas las clases se apliquen correctamente, a fin de realizar un cálculo de ancho correcto.

Answer 2

Puede utilizar image.style.width (imagen debe ser su elemento). Esto devuelve una cadena vacía si no está definida en CSS.

Answer 3

Puede verificar el estilo del elemento.cssText si el ancho está definido;

<img id="pic" style="width:20px;" src="http://sstatic.net/ads/img/careers-ad-header-so.png" /> 

var pic = document.getElementById('pic'); 
alert(pic.style.cssText); 

Pero tenga en cuenta los siguientes estilos

border-width: 10px; 
width: 10px; 

sólo debe coincidir con el ancho no el ancho del borde.

Answer 4

No, el método getComputedStyle() del que depende la función css() de jQuery no puede distinguir entre un ancho calculado a partir de auto contra anchos explícitos. No se puede decir si había algo establecido en la hoja de estilo, solo desde el style="width: ..." directo en línea (que se refleja en la propiedad del elemento .style.width).

currentStyle funciona de manera diferente y le dará auto, sin embargo, esta es una extensión de IE no estándar.

Si realmente querían trabajar hacia fuera, usted podría iterar sobre document.styleSheets, leyendo cada una de sus declaraciones, conseguir el selector y la consulta de él para ver si su elemento de destino corresponde, luego ver si contiene una regla width . Sin embargo, esto sería lento y para nada divertido, especialmente dado que el estilo StyleSheet DOM de IE difiere de los otros navegadores. (Y aún así no sería hacer frente a los pseudo-elementos y pseudo-clases, como :hover.)