私は、ボーダー ボックス ボックス モデルをクロス ブラウザーで使用できるようにする小さなコード スニペットを作成するのに忙しくしています。これまでのところ、基本的な機能は正常に機能していますが、マージンが機能しません。利用可能なスペースに適応する必要がありますが、コンソールは NaN を返し、それがどこから来たのかわかりません。
ここにフィドルがあります。
console.log には何も記録されず、その理由がわかりません。どんな助けでも大歓迎です。
私は、ボーダー ボックス ボックス モデルをクロス ブラウザーで使用できるようにする小さなコード スニペットを作成するのに忙しくしています。これまでのところ、基本的な機能は正常に機能していますが、マージンが機能しません。利用可能なスペースに適応する必要がありますが、コンソールは NaN を返し、それがどこから来たのかわかりません。
ここにフィドルがあります。
console.log には何も記録されず、その理由がわかりません。どんな助けでも大歓迎です。
フィドルの多くの部分で、次のパターンがあります。
($(this).css("border-left-width") * 2).replace("px", "")
px
乗算を実行した後に を消去しようとすると、構文エラーが発生します。どちらかである必要があります
($(this).css("border-left-width").replace("px", "") * 2)
自動型変換または
(parseInt($(this).css("border-left-width"), 10) * 2)
文字列を整数として解析し、末尾のpx
:を削除します。
指定された基数で数値ではない文字が検出された場合
parseInt
、それ以降のすべての文字を無視し、その時点までに解析された整数値を返します。parseInt
数値を整数値に切り捨てます。先頭と末尾のスペースは許可されています。
これのため:
$(this).css("padding-left")
と
$(this).css("border-left-width")
「px」を含む文字列を返します。これに 2 を掛けると NaN になります。次のように、乗算する前に、結果の文字列を浮動小数点数に解析することで、この問題を解決できます。
(parseFloat($(this).css("padding-left")) * 2 )
お役に立てれば!