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

【问题标题】：Getting CSS border value with jQuery in Firefox 14.0.1在 Firefox 14.0.1 中使用 jQuery 获取 CSS 边框值
【发布时间】：2012-08-26 21:43:00
【问题描述】：

我在 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');

【问题讨论】：

标签： jquery html css firefox

【解决方案1】：

引用.css docs。

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

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

例如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');

【讨论】：

我也试过 $('img').css('border-style', 'solid').css('border-style') 和 $('img').css('borderStyle', 'solid').css('borderStyle') 但这在 Firefox 上也不起作用。我也试过$('img').css('border', 'solid 2px green').css('borderStyle')
borderStyle 也是简写
@Mike，它有效，请检查您那里的属性拼写错误。是border-top-style 不是border-style-top
对不起，我粘贴了 Abody97 的代码，现已删除。谢谢你的帮助！我应该更仔细地阅读……我总是在 Chrome 上开发是我的错！

【解决方案2】：

试试这个：

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

FIDDLE

【讨论】：

【解决方案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)'”这样的字符串

【讨论】：

@EnesUnal 只是为了确保 'border-color' 'border-style' 等也不受支持，请查看另一条评论，他尝试了其中一个 :) 抱歉，如果这让您烦恼。
好吧，我现在确定你有什么个性。祝你有一个美好的一天
@EnesUnal 嘿，现在才明白评论的含义：）我没有看到您的编辑，现在才看到，在您发表评论后自己编辑 :) 抱歉，如果这再次惹恼了您。跨度>
:) 好的，没问题。祝你有美好的一天:)

【解决方案4】：

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

$('img').css({'border':'solid 2px red','color':'green'})

Jquery 不支持简写属性。

【讨论】：

【解决方案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 时它必须返回哪个。

【讨论】：