Utilizzare JQuery per verificare se l'elemento ha un bordo?

Quindi sto giocando con $(el).css(), cercando di determinare se un elemento ha un bordo. Io uso .css("border-style", "solid") per impostare il confine, che funziona, ma in realtà imposta 4 stili individuali:Utilizzare JQuery per verificare se l'elemento ha un bordo?

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

Così, il controllo di un bordo è un po 'ingombrante come si deve fare qualcosa di simile:

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

Il semplice controllo di $(el).css("border-style") != "" non funziona poiché border-style è sempre uguale a "".

C'è un modo più elegante per farlo?

fonte

2012-01-17 Tony R

perché non lavori con le lezioni? – jcvegan

Solitamente lo faccio, ma in questo caso particolare, gli stili sono così dinamici e così specifici per ogni elemento che è più facile farlo in questo modo. –

border-style è una scorciatoia e non riesci a metterli insieme in modo da avere per farli separatamente, perché come per 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.

fonte

2012-01-17 18:49:49

Oh wow. Quindi è ufficiale! Grazie, questo lo spiega. –

Se si desidera sapere se 4 proprietà sono TUTTE impostate, allora sì è necessario controllare 4 proprietà. Sebbene memorizzassi il selettore nella cache.

$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

fonte

2012-01-17 18:43:58 Sinetheta

Quindi una domanda che ho è, lo "stile di confine" esiste davvero anche nei CSS? O è solo una scorciatoia per gli altri 4? –

Quest'ultimo stile di bordo imposta 4 proprietà. Se si ispeziona usando uno strumento debugger, di solito c'è un'opzione "stili calcolati" che mostrerà tutto. Il bordo della singola riga: il blu fisso di 1 px imposta 12 proprietà. – Sinetheta

non so se è possibile fai quello che stai provando. Il DOM fornisce solo gli stili per l'elemento che sono stati assegnati in linea o all'elemento nello script. Non mostra se ha ereditato uno stile come un bordo dalle dichiarazioni CSS.

fonte

2012-01-17 18:53:45 pseudosavant

Hai ancora per testare le proprietà, ma questo può rendere un po 'più astratta ...

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; 
}

fonte

2012-01-17 18:55:01 lsoliveira

Ho pensato a qualcosa del genere, ma è più difficile da leggere. –

Con poche modifiche è possibile trasformarlo in un plug-in jQuery e astrarre il nome della proprietà in modo da poterlo riutilizzare per testare altri valori delle proprietà stenografiche. Si riduce la leggibilità del metodo ma si aumenta la leggibilità complessiva ('$ ('p'). CheckProperty ('margin', '5px')'). – lsoliveira

E' possibile visualizzare i valori di stile dai file CSS ereditati ....

avviso ($ ("selettore") css ("border-bottom-color")).;

fonte

2013-07-22 15:44:01

Utilizzare JQuery per verificare se l'elemento ha un bordo?

risposta

Problemi correlati