border-width を取得／設定するときに気をつけること

以下のような a要素に囲まれたimg要素はスタイル(CSS)を指定しないとブラウザによっては 2px の border が付けられることがある。

例)

<a href="#"><img src="image.jpg"/></a>

この img 要素の border-width を jQuery で取得し、違いを見てみる。

スタイル(CSS)での border 指定がない場合(defaultの状態)

img 要素の border-width を取得する

alert($('a > img').css('border-width'));

取得結果
IE8	2px
Firefox3	空文字
Chrome	空文字

img 要素の border-top-width を取得する

alert($('a > img').css('border-top-width'));

取得結果
IE8	2px
Firefox3	2px
Chrome	0px

Chrome では default のままでは border は付かない。

CSSで「border:none」指定した場合

img{
  border:none;
}

img要素のborder-widthを取得する

取得結果
IE8	medium
Firefox3	空文字
Chrome	空文字

img要素のborder-top-widthを取得する

取得結果
IE8	medium
Firefox3	0px
Chrome	0px

default との違い

• IE8 で「medium」が返ってくる。

IE Testerというソフトで調べた限りでは medium を返すのは IE8 のみだった。

CSSで「border-width:0」指定した場合

img{
  border-width:0;
}

img要素のborder-widthを取得する

取得結果
IE8	0px
Firefox3	空文字
Chrome	空文字

img要素のborder-top-widthを取得する

取得結果
IE8	0px
Firefox3	0px
Chrome	0px

結論

以上のことから、

• CSS で border をなくす場合、jQuery で border-width を取得する際のことを考慮するなら、「border:none」ではなく「border-width:0」とするべき。
• jQuery で border-width を取得する場合、
  「border-(top|right|bottom|left)-width」から値を得ること。