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

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

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 всегда равна "".

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

источник

2012-01-17 Tony R

Почему вы не работаете с классами? – jcvegan

Обычно я делаю это, но в этом конкретном случае стили настолько динамичны и настолько специфичны для каждого элемента, что это проще сделать так. –

border-style является Стенография и вы не можете получить их вместе, так что вы должны получить их раздельно, потому что, как за 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.

источник

2012-01-17 18:49:49

О, ничего себе. Так что это официально! Спасибо, это объясняет это. –

Если вы хотите узнать, установлены ли 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

источник

2012-01-17 18:43:58 Sinetheta

Итак, у меня есть вопрос, действительно ли «пограничный стиль» действительно существует в CSS? Или это просто ярлык для других 4? –

Последний, пограничный стиль устанавливает 4 свойства. Если вы проверяете использование инструмента отладчика, обычно есть варианты «вычисленных стилей», которые покажут их все. Одиночная граница линии: 1 px сплошной голубой устанавливает 12 свойств. – Sinetheta

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

источник

2012-01-17 18:53:45 pseudosavant

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

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

источник

2012-01-17 18:55:01 lsoliveira

Я думал о чем-то подобном, но мне это труднее читать. –

С небольшим изменением вы можете сделать его плагином jQuery и абстрагировать имя свойства, чтобы его можно было повторно использовать для проверки других значений стенографических свойств. Вы уменьшаете читаемость метода, но увеличиваете общую читаемость ('$ ('p'). CheckProperty ('margin', '5px')'). – lsoliveira

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

оповещения ($ ("селектор") CSS ("границы снизу цвет")).

источник

2013-07-22 15:44:01

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

ответ

Смежные вопросы