使用JQuery检查元素是否有边框？

所以我正在玩$(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总是等于“”。

有没有更优雅的方式来做到这一点？

Answer 1

border-style是速记，你不能把它们放在一起所以你必须分开得到它们，因为根据Jquery CSS文档

 Shorthand CSS properties (eg 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

如果您想知道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

Answer 3

我不知道是否可以做你正在尝试的事情。 DOM仅为内联分配的元素或脚本中的元素提供样式。 它没有显示它是否从CSS声明inheritance了诸如边框之类的样式。

Answer 4

你仍然需要测试属性，但这可以使它更抽象……

 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

它可以显示inheritance的CSS文件的样式值….

（$（ “选择”），CSS（ “底部边框颜色”））警告;