15

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

5 に答える 5

18

.cssドキュメントの引用。

簡略化された CSS プロパティ (例えば、margin、background、border ) はサポートされていません。たとえば、レンダリングされた余白を取得する場合は、 と などを使用$(elem).css('marginTop')し$(elem).css('marginRight')ます。

の場合、および関連するプロパティborderを使用する必要があります。border-widthborder-styleborder-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-01T08:13:18.493 に答える
4

これを試して：

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

フィドル

于 2012-09-01T08:36:44.800 に答える
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)'

于 2012-09-01T08:17:03.313 に答える
0 
var objImage = $('img').css('border', 'solid 2px red');
objImage.css('border-top-color');
objImage.css('border-top-width');
objImage.css('border-top-style');

だけでなく、、、topにも適用できます。rightleftbottom

これも動作しないコードです:

objImage.css('border-style');

, border, CSSmarginのpaddingプロパティは個別に編集可能です。border-topが と異なる場合、border-leftブラウザは、問い合わせたときにどちらを返さなければならないか混乱する可能性がありますborder。

于 2012-09-01T08:28:28.893 に答える
0

おそらく、次の構文を使用して複数のプロパティを使用しようとしている可能性があります

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

Jquery でサポートされていない省略形のプロパティ。

于 2012-09-01T08:18:49.607 に答える