如何在jQuery / javascript中获取边框宽度

Question

如何从

解析边框宽度

style="border: solid 1px black;"

在jQuery / javascript中？

$elem.css('border-width')

没有这样做。

注意我需要解析css的宽度，因为元素可能是display:none

由于

编辑我实际上并没有使用内联样式，我只是为了简单而编写它，因为我没有意识到存在任何行为差异。它似乎适用于内联样式，但仍然无法从应用的css类中获得任何值。

Answer 1

您可以使用parseInt();来解析从Npx到N的边框宽度：

var width = $elem.css('borderWidth'); // 150px
var parsed = parseInt(width);         // 150

我周围有一个Google，为了获得边框的宽度，你必须提供一个明确的边框：

var borderWidth = $elem.css("border-left-width");

这是因为每个边框都可以有不同的尺寸，样式和颜色。不幸的是，它似乎并不比这更简单。

Answer 2

jQuery在引用CSS属性时不允许使用-，因此请删除hypen并将以下字母大写。

$elem.css('borderWidth');

Coded in jsFiddle to demonstrate

Answer 3

在寻求离开边界并包含关于基数的难以捉摸的评论时，要完成Generic的答案：

<div style="border-style:solid;border-left-width:15px;"></div>

脚本中的

：

var width =parseInt($('div').css('borderLeftWidth'),10);
alert(width);

Answer 4

var bordersOnBothSides = $("#measureMe").outerWidth() - $("#measureMe").innerWidth() );

Answer 5

如果你对元素有相同的边界widh，或者你需要左边，顶部边框宽度，普通js：

elem.clientLeft; //get left border of element
elem.clientTop; //get top border of element

要向右移动，底部边框使用jquery + css：

parseInt($(elem).css('borderLeftWidth'),10); // 10 use to get result in dec, not hex number system