読者です 読者をやめる 読者になる 読者になる

江戸一番のジャスタウェイ職人のブログ

江戸一番のジャスタウェイ職人

Chromeのズーム機能を使うとborderの値などに小数点が入る

今まで要素の罫線幅を取る時など適当に取得していたが問題が...

$('.a').css('borderBottomWidth')

> "1px" (100%表示時)
> "1.1111111640930176px" (90%表示時)

なんとズーム時にCSSの値が再計算されているのだ。(Chrome 30.0.1599.66で確認)

CSSに1pxと書いてもjsから取得時に1.1111...といった値が引けてしまうケースありうる。

$('.a').css('borderBottomWidth').match(/(\d+)px/) ? RegExp.$1 : 0

> "1111111640930176"

なので小数点を考慮していない適当な正規表現を書くとこんな結果が出てくる。

とりあえず7kai Tasksは\dを[0-9\.]に置き換えた。

$('.a').css('borderBottomWidth').match(/([0-9\.]+)px/) ? RegExp.$1 : 0

> "1.1111111640930176"

自分ではズームを使うことがないので気付かなかった...