5

私がすべての選択に基本的なスタイルを割り当てるとき、例えば。

width: 300px;
padding: 0;
margin: 0;
border-width: 1px;

さまざまな状況でJa​​vaScriptを使用して幅を取得すると、予期しない結果が発生します。

  • 選択が表示されている場合、withは298pxです。
  • 選択がdisplay：noneの場合、幅も298px（ff、jquery）です。
  • selectがdisplay：noneのdivにある場合、幅は正しい 300pxです。

（結果も同じ割り当てです：box-sizing：border-box）

取得した幅は、使用しているブラウザやjavascriptフレームワークとは異なる場合がありますが、全体として、割り当てられた幅（300px）を取得できるようにしたいだけです。（ここで述べられている「形式的な奇妙さ」と関係があると思います：http：//meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/、しかしなぜブラウザはユーザーによって割り当てられた幅??）

割り当てられた幅を取得するにはどうすればよいですか？実際にそれを行う方法はありますか？

例：

http://jsfiddle.net/ETCcH/5/（jqueryを使用する場合、またはmootoolsを使用する例の場合は5を4に置き換えます）

（さまざまなブラウザで表示して試してください）

4

4 に答える 4

2

cssファイルに値が書き留められることは決してありません。JavaScriptを使用すると、Webブラウザによってその要素に現在適用されているcssプロパティのみを取得できます。

幅が実際に固定されている場合は、max-widthを300pxに設定するかoverflow: hidden、オプションの場合は-を追加して「強制」することができます。

于 2012-05-25T09:40:02.170 に答える
2

実際、問題を引き起こしているのは国境です。border-width を 0 に設定すると、全員に 300px が表示されます。実際、ブラウザーは、期待どおりに要素の幅を 300px に設定し、周囲に境界線を追加しています。表示可能な要素の場合、offsetWidth を使用して要素の幅全体を取得できます (表示を none に設定すると、これは 0 に設定されます)。

于 2012-05-25T10:01:51.260 に答える
0

ブラウザのボックスサイズは、選択した要素のデフォルトではボーダーボックスのようです。ボックスサイズを入れてみてください：content-box; selectとjqueryで正しい結果が得られます。

Jqueryは、「width」メソッドを使用してコンテンツの幅を取得するため、マージン、パディング、および境界線が削除されます。ボックスサイズ：border-boxの場合、指定された幅はパディングと境界線を考慮に入れます。

エルノリエル

于 2012-05-25T09:45:43.840 に答える
0

CSS で指定された値にアクセスする簡単な方法はありません。

.css()jQuery で使用すると、計算された値が取得されます。あなたが求めているものは、指定された値と呼ばれます。

指定された値が計算されると、状況に応じて調整されます（フィドル、ボーダー内）。幅が違うのはそのためです。ただし、親 div 内に非表示の選択が境界線に適応しない理由はわかりません。

解決策 1 : 要素の指定された値を取得するよりも、親の幅を探す方がよいのではないでしょうか? とにかく特定の要素に幅を設定しないことがいかに良い習慣であるかを見て（グリッドシステムなどを使用する場合など、親に設定するのではなく）、これがあなたのアプローチかもしれません。親で幅を使用すると、子の最大幅が効果的に制限されます。

解決策 2 : 指定された値が本当に必要な場合はdocument.styleSheets、すべてのスタイルシートについて、プロパティにアクセスし、cssRules探している値が見つかるまで下に進むことができると思います。Chrome でこれを試したところ、cssRules空のように見えますが、Firefox はそれを入力し、ページに添付されたすべてのスタイルシートのすべてのスタイルを素直に一覧表示します。

私はそれをお勧めしませんが、その穴を掘り下げることにした場合は、次の SO の質問のいずれかに興味があるかもしれません。

どちらも変更することはお勧めしません。box-sizingこれにより、探している値が得られるためです。ただし、要素の実際の幅はより広くなります (基本幅 300px + 境界線 = 幅 302px)。

これらのどれにも当てはまらない場合は、腰を落ち着けて、自分が何をしたいのか、その理由について考えてみましょう (そして説明してください!)。単純なタスクのために非標準的なことをしたいと思うときはいつでも、私のソリューションはおそらく最適ではなく、先に進む前に少しズームアウトする必要があるため、めったにありません。

于 2012-05-25T10:13:40.123 に答える