Используйте JQuery, чтобы проверить, имеет ли элемент границу? - PullRequest
Новая
       13

Используйте JQuery, чтобы проверить, имеет ли элемент границу?

6 голосов
/ 17 января 2012

Итак, я играю с $(el).css(), пытаясь определить, есть ли у элемента граница. Я использую .css("border-style", "solid"), чтобы установить границу, которая работает, но на самом деле она устанавливает 4 отдельных стиля: 

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

Итак, проверка границы немного сложна, так как вам нужно сделать что-то вроде: 

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

Простая проверка на $(el).css("border-style") != "" не работает, поскольку border-style всегда равен "".

Есть ли более элегантный способ сделать это?

Ответы [ 5 ]

8 голосов
/ 17 января 2012

border-style является Сокращением, и вы не можете собрать их вместе, так что вы должны получить их отдельно, потому что согласно Документация Jquery CSS 

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.
3 голосов
/ 17 января 2012

Если вы хотите знать, установлены ли ВСЕ 4 свойства, тогда да, вы должны проверить 4 свойства.Хотя я бы кешировал селектор. 

$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

1 голос
/ 17 января 2012

Вам еще нужно протестировать свойства, но это может сделать его немного более абстрактным ... 

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;
}
1 голос
/ 17 января 2012

Я не знаю, возможно ли сделать то, что вы пытаетесь.DOM предоставляет только стили для элемента, которые были назначены встроенными или для элемента в сценарии.Он не показывает, унаследовал ли он стиль, такой как граница, от объявлений CSS.

0 голосов
/ 22 июля 2013

Может отображать значения стиля из унаследованных файлов CSS ....

alert ($ ("селектор"). Css ("border-bottom-color"));

...