Użyj JQuery, aby sprawdzić, czy element ma ramkę?

Question

Więc gram z $(el).css(), próbując ustalić, czy element ma ramkę. Używam .css("border-style", "solid") ustawić granicę, która działa, ale faktycznie ustawia to 4 indywidualne style:

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

więc sprawdzanie granicy jest nieco kłopotliwe, ponieważ trzeba zrobić coś takiego:

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

Po prostu sprawdzanie, czy $(el).css("border-style") != "" nie działa, ponieważ border-style jest zawsze równe "".

Czy istnieje bardziej elegancki sposób na zrobienie tego?

Answer 1

border-style jest skrótem i nie można się ich razem, więc trzeba je Separatly, bo jak za 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. 

Answer 2

Jeśli chcesz wiedzieć, czy 4 właściwości są ustawione jako ALL, to tak, musisz sprawdzić 4 właściwości. Chociaż buforowałbym selektor.

$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

Answer 3

ja nie wiem, czy to jest możliwe rób to, co próbujesz. DOM dostarcza tylko style dla elementu, który został przypisany w linii lub do elementu w skrypcie. Nie pokazuje, czy odziedziczył styl, taki jak granica z deklaracji CSS.

Answer 4

Trzeba jeszcze sprawdzić właściwości, ale może to zrobić to trochę bardziej abstrakcyjne ...

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

Answer 5

może wyświetlić wartości stylu od odziedziczonych plików CSS ....

alert ($ ("selektor"). css ("border-bottom-color"));