2013-06-18 17 views
5

jQuery/CSSでクロスブラウザの問題をデバッグしようとしています。jQuery - Firefoxでは空の文字列として返されるが、Chromeでは返されないCSS( 'border-width')

私はクラスの境界幅を取得しようとしています。クラスはそのようにCSSに設定されている:jQueryので

.mod_button { 
    position: relative; 
    color: #fff; 
    border-color: #06253e; 
    border-width: 1px; 
    border-style: solid; 
} 

が、私はそうのようなボーダー幅を取得しようとしています:

var bWidth = $('.mod_button').css('border-width'); 

これは、「1ピクセル」の文字列として適切に返すように思えますChromeでしかし、Firefoxでは常に空の文字列 ""を返します。私はこれらの結果を、ChromeとFirefoxの両方の開発者ツールでJSデバッガをステップ実行して確認しました。

私はこの問題をデバッグしようとしていますが、私は簡潔な答えを見つけることができません。多分このコミュニティは、私がこの問題をどのように修正できるかについての手がかりを与えるかもしれません。

ありがとうございました!

+0

あなたが実際にやろうとしている何を?私は '.hasClass()'のようなメソッドを使用することをお勧めします。各ブラウザには、cssのさまざまなデフォルト設定と実装があります。 –

+0

あなたは 'var bWidth = $( '。mod_button')を試してみましたか?css(" border-left-width ");'?またはあなたが必要とする国境を問わず – Morpheus

+0

私はデモを作成しました。それは本当です:http://jsfiddle.net/d93nL/ –

答えて

14

"border"、 "background"、 "border-width"などのプロパティは略語です。それらはサポートされていません。代わりに、より特定のプロパティを使用してください: "border-top-width"、 "border-bottom-width"。

次の行は、すべてのブラウザで動作するはずです:

var bWidth = $('.mod-button').css('border-top-width'); 

関連質問:Getting CSS border value with jQuery in Firefox 14.0.1

+0

ありがとう!それはトリックを行うように見えた。類似した/重複した質問を申し訳ありません。 – defwonder

+0

これは私を助けてくれました、私のCSS( 'border-color')を取得しようとしていました。それは働いていたクロームで、Firefoxでは空の文字列を得ていました。 ..今「ボーダートップカラー」を試してみて、魅力的な作品。いい仕事。 – webkit

関連する問題