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

我在Firebug控制台中运行以下代码。在Firefox中使用jQuery获取CSS边框值14.0.1

$('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');

来源

2012-09-01 Mike

报价.css文档。

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

对于的情况下，你需要使用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');

来源

2012-09-01 08:13:18 Alexander

我也试过'$（ 'IMG'）的CSS（ '边框样式'， '实'）的CSS（ '边框样式'）。 '和'$（'img'）.css（'borderStyle'，'solid'）.css（'borderStyle'）'，但是这对Firefox也不起作用。我也试过'$（'img'）.css（'border'，'solid 2px green'）。css（'borderStyle'）' – Mike

'borderStyle'也是一个简写 – Alexander

@Mike，它的工作原理是检查属性错字你在那里。它是'边框顶部样式'而不是'边框样式顶部' – Alexander

在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'

是支持longhands :)干杯！请享用！！！

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

如果你确信它们是相同像做

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

得到像“2px solid rgb(255,255,255)'

来源

2012-09-01 08:17:03 sabithpocker

像一个专业的行为，这是什么？ – totten

@EnesUnal只是为了确保'border-color''''''''''''''''''''''边框样式'等也不支持，检查其他评论，他尝试了其中的一个:)对不起，如果这让你烦恼。 – sabithpocker

我不怪你，我正在编辑你的答案。 – totten

也许你要使用多个属性使用以下语法

字符串$（'img'）.css（{'border'：'solid 2px red'，'color'：'green'}）

速记属性not supp砸在Jquery。

来源

2012-09-01 08:18:49 Codegiant

@Mike是你的工作？ – Codegiant

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

由于border，margin，CSS的padding性质是seperately编辑。如果border-top与border-left不同，浏览器可能会产生困惑，当您刚刚询问border时，浏览器必须返回。

来源

2012-09-01 08:28:28 totten

试试这个：

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

FIDDLE

来源

2012-09-01 08:36:44 adeneo

+1这简直是太棒了，而且非常简单:) – sabithpocker

平原JavaScript通常是？ – adeneo

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

回答

相关问题