Use JQuery para verificar si el elemento tiene un borde?

Así que estoy jugando con $(el).css(), tratando de determinar si un elemento tiene un borde. Yo uso .css("border-style", "solid") para establecer la frontera, que funciona, pero en realidad él se establecen 4 estilos individuales:Use JQuery para verificar si el elemento tiene un borde?

border-right-style 
border-left-style 
border-top-style 
border-bottom-style

Por lo tanto, la comprobación de una frontera es un poco engorroso ya que hay que hacer algo como:

if ($(el).css("border-right-style") == "solid" && $(el).css("border-left-style") == "solid" && ...) {}

Simplemente comprobando $(el).css("border-style") != "" no funciona ya que border-style siempre es igual a "".

¿Hay una manera más elegante de hacer esto?

Fuente

2012-01-17 Tony R

¿por qué no trabajas con las clases? – jcvegan

Normalmente lo hago, pero en este caso particular, los estilos son tan dinámicos y tan específicos para cada elemento que es más fácil hacerlo de esta manera. –

border-style es la abreviatura y no puede obtener juntos lo que hay que conseguir que separadamente, debido Según Jquery CSS documentation

Shorthand CSS properties (e.g. margin, background, border) are not supported. 
For example, if you want to retrieve the rendered margin, 
use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

Fuente

2012-01-17 18:49:49

Oh wow. ¡Así que es oficial! Gracias, esto lo explica. –

Si quiere saber si 4 propiedades están TODAS configuradas, entonces sí, tiene que verificar 4 propiedades. Aunque guardaría en caché el selector.

$el = $('a'); 
if ($el.css("border-right-style") == "solid" && $el.css("border-left-style") == "solid" && $el.css("border-top-style") == "solid" && $el.css("border-bottom-style") == "solid") 
{ 
    alert('yay'); 
}

jsFiddle

Fuente

2012-01-17 18:43:58 Sinetheta

Entonces, una pregunta que tengo es, ¿el "estilo de borde" existe realmente en CSS? ¿O es solo un atajo para los otros 4? –

Este último, estilo de borde establece 4 propiedades. Si inspecciona el uso de una herramienta de depuración, generalmente hay una opción de "estilos computados" que los mostrará a todos. El borde de una sola línea: 1 px de color azul fijo establece 12 propiedades. – Sinetheta

No sé si es posible haz lo que estás intentando. El DOM solo proporciona los estilos para el elemento que se asignaron en línea o al elemento en el script. No muestra si heredó un estilo como un borde de declaraciones CSS.

Fuente

2012-01-17 18:53:45 pseudosavant

Usted todavía tiene que probar las propiedades, pero esto puede que sea un poco más abstracto ...

function check(sel, prop) { 
    var i, property, $o = $(sel), directions = ["left", "right", "top", "bottom"]; 

    for (i = 0; i < directions.length; i++) { 
     property = $o.css(prop + '-' + directions[i] + '-style'); 
     if (property !== 'solid') { 
      return false; 
     } 
    } 

    return true; 
}

Fuente

2012-01-17 18:55:01 lsoliveira

Pensé en algo como esto, pero es más difícil de leer. –

Con pocos cambios puede convertirlo en un complemento de jQuery y abstraer el nombre de la propiedad para que pueda reutilizarlo para probar otros valores de propiedades abreviadas. Disminuye la legibilidad del método pero aumenta la legibilidad general ('$ ('p'). CheckProperty ('margin', '5px')'). – lsoliveira

Puede mostrar los valores de estilo CSS a partir de archivos heredados ....

alerta ($ ("selector"). css ("borde-color-inferior"));

Fuente

2013-07-22 15:44:01

Use JQuery para verificar si el elemento tiene un borde?

Respuesta

Cuestiones relacionadas