バニラ JavaScript を使用して簡単なプログレス バーの開発を開始しました。CSS で設定された幅を取得する限り、私が JS で見つけた唯一の方法は使用すること.offsetWidthです。以下は、セットアップを開始した機能デモのコードです。フィドルリンクは質問の下部にあります。
HTML:
<section id="box"></section>
<p>
<section id="box2"></section>
CSS:
#box, #box2 {
height: 10px;
width: 5px;
background-color: lightBlue;
}
#box2 {
width: 4px;
}
JavaScript (オンロード) :
var savedwidth = document.getElementById("box").offsetWidth;
alert("box 1 width " + savedwidth);
savedwidth = document.getElementById("box2").offsetWidth;
alert("box 2 width " + savedwidth);
プロパティを正確に取得したかどうかをテストしているときに、幅が設定されて5pxいると が返されることに気付きました6px。他のすべては問題ないようです。4px = 4px、6px = 6px。
なぜそれが起こったのか誰かが知っているかどうか興味がありましたか？私がやろうとしていることに影響を与えないように見えるのは最小限ですが、知れば知るほどうまくいくでしょう。