在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

回答

相關問題