Question

我在Firebug控制台中运行以下代码。

$('img').css('border', 'solid 2px red').css('border');

出现红色图像边框，但它返回一个空字符串，为什么会这样？

它适用于Chrome和Safari开发人员工具。

更新：jQuery文档说获取CSS值时不支持速记属性。但是我也尝试过以下操作，但在Firefox中没有运气（所有在Chrome和Safari中工作）

$('img').css('border-style', 'solid').css('border-style');
$('img').css('borderStyle', 'solid').css('borderStyle');
$('img').css('border', 'solid 2px green').css('borderStyle');

Answer 1

引用.css文档。

不支持速记CSS属性（例如边距，背景，边框）。例如，如果要检索渲染的边距，请使用：$(elem).css('marginTop')和$(elem).css('marginRight')，依此类推。

对于border的情况，您需要使用border-width，border-style和border-color相关属性。

e.g。 border-color：

$('img').css('border-top-color', 'red').css('borderTopColor');
$('img').css('border-right-color', 'red').css('borderRightColor');
$('img').css('border-bottom-color', 'red').css('borderBottomColor');
$('img').css('border-left-color', 'red').css('borderLeftColor');

Answer 2

试试这个：

var border = $('img').css('border', '2px solid red')[0].style.border;

FIDDLE

Answer 3

firefox中支持的属性：

'border-top-color'
'border-right-color'
'border-bottom-color'
'border-left-color'

'border-top-width'
'border-right-width'
'border-bottom-width'
'border-left-width'

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

支持的长官:)干杯！享受!!!

在大多数情况下，您仍然可以使用速记来设置边框。

如果您确定它们是相同的，请执行

之类的操作

var borderString = $('img').css('border-top-width') + " " 
                 + $('img').css('border-top-style') + " " 
                 + $('img').css('border-top-color');

获取类似“2px solid rgb(255,255,255)'

的字符串

Answer 4

也许您正在尝试使用多个属性使用以下语法

$（'img'）。css（{'border'：'solid 2px red'，'color'：'green'}）

Jquery不支持的速记属性。

Answer 5

var objImage = $('img').css('border', 'solid 2px red');
objImage.css('border-top-color');
objImage.css('border-top-width');
objImage.css('border-top-style');

不仅适用于top，它也适用于right，left和bottom。

这也是一个不起作用的代码：

objImage.css('border-style');

由于CSS的border，margin，padding属性可以单独编辑。如果border-top与border-left不同，浏览器可能会混淆，当您刚刚询问border时，它必须返回。

在Firefox 14.0.1中使用jQuery获取CSS边框值

5 个答案: