私の知る限り、pageXOffset/pageYOffsetプロパティは Netscape 4 の時代から既に利用可能でした。Netscape 6 の頃に導入され
たようです。scrollX/scrollY

別の質問:

Q2. scrollX/scrollY を実装しているが、pageXOffset/pageYOffset をサポートしていないブラウザーはありますか?

前の質問に誰も答えられなかったので、3 番目の質問を追加します。

Q3. scrollX/scrollY が CCSOM の最新の編集者のドラフトに追加され、ワー​​キング ドラフトは pageXOffset/pageYOffset のみを取得しましたが、なぜ両方の属性を保持しているのでしょうか?

heightおよびdisplayCSS プロパティに (CSSOM を介して)割り当てられた空の文字列があります。この場合、それはどういう意味ですか？

私はCSSコードを編集するための小さなjavascriptスクリプトに取り組んでいますが、他のブラウザーと比較して、Internet Explorerには、多くの...特殊性があることがわかりました。たとえば、document.stylesheetオブジェクトのrulesオブジェクトは、ほとんどのブラウザではcssRuleと呼ばれ、IEではruleと呼ばれます。

ここでやりたいのは、ウィンドウのサイズ（window.innerWidth＆document.body.clientWidth）を含むオブジェクトのプロパティの参照を割り当てて、IEオブジェクト名を使用する必要があるかどうかを毎回チェックしないようにすることです。 「通常の」もの。

それは良い/悪い考えですか？

質問を投稿する前に、私はそれについてもう少し考えて、解決策を思いつきました。

これを行う別の/より良い方法はありますか？

ありがとう

（ええ、これを行う必要はないことはわかっています。特に、小さなスクリプトを作成していて、パフォーマンスはそれほど問題ではないので、ほとんど興味があります。）

#Wrapperだから、固定幅のDIVがあります。その DIV 内に、#Panel幅が固定された別の DIV があります。

Panel の幅が Wrapper の幅よりも大きい場合があります。そのような場合、Panel を完全にラップするように、JavaScript を介して Wrapper を広げたいと思います。

ライブデモ: http://jsfiddle.net/H6rML/

.scrollWidthPanel の幅を決定するために Wrapper で使用するつもりでした。ただし、問題は、Wrapper に水平パディングがあり、.scrollWidth何らかの理由でラッパーの左パディングしか含まれていないことです。そう：

したがって、与えられた：

Wrapper.scrollWidthを返しますが310px、これはあまり役に立ちません。パディングが含まれておらず、パネルの幅のみが返された場合.scrollWidthは、それで作業できます (パディングをその値に手動で追加します)。両方のパディングが含まれていれば、それも使用できます。しかし、なぜ左のパディングだけが含まれているのでしょうか? (ちなみに、この動作はクロスブラウザーのようです。)

いくつかの追加メモ:

1. Wrapper で幅を直接設定することはできません。実際のコードでは、Wrapper の数レベル上にある祖先要素に幅を設定し、カスタム API を使用して幅を設定しています。320pxこれが、完全な値を取得する必要がある理由です。

2. Wrapper の内容に依存しない解決策を希望します。私のデモでは Panel ですが、他のシナリオでは、オーバーフローする別の要素や複数の要素が存在する可能性があります。それが私が.scrollWidthWrapperを使った理由です。

320px値に適切なパディングを手動で追加せずに値を取得する方法はあり.scrollWidthますか?

ところで、標準によれば、適切なパディングを含める必要があります。

scrollWidth 属性は、次の手順を実行した結果を返す必要があります。

1. 要素に CSS レイアウト ボックスが関連付けられていない場合は、0 を返し、これらの手順を終了します。

2. 要素がルート要素で、ドキュメントが互換モードでない場合は、max(ドキュメント コンテンツの幅、innerWidth の値) を返します。

3. 要素が HTML body 要素であり、Document が quirks モードの場合は、max(ドキュメント コンテンツの幅、innerWidth の値) を返します。

4. 'padding-left' プロパティの計算値、'padding-right' の計算値、および要素のコンテンツ幅を返します。

ソース: http://www.w3.org/TR/cssom-view/

ブラウザがそれに応じて動作しないのはなぜですか?

私の投稿をさらに明確にするために、2 つの主な質問をまとめてみましょう。

(1) 標準で値に適切なパディングを含める必要があると規定されている.scrollWidth場合、ブラウザがそれに応じて動作しないのはなぜですか?

320px(2)正しいパディングを手動で追加しなくても、正しい値(私の場合)を取得することは可能ですか?

この質問は別のスレッドで回答されています

この質問に対する答えはここにあります:子要素が水平方向にオーバーフローする場合、親の右側のパディングが無視されるのはなぜですか?

</p>

そのため、ブラウザがサポートしていない CSS プロパティの値を取得しようとしています。これは、ポリフィルを作成するために使用したいものですが、いつでもプロパティの値を知る必要があります。

これまでに試したすべてのメソッドを含むテスト ファイルを次に示します。基本的に、次のことを前提としています。

rotate(2deg)ブラウザがサポートしているかどうかに関係なく、JavaScript を介して値を取得できるようにしたいと考えています。これは可能ですか？もしそうなら、それを行うための前もっての方法はありますか（古いブラウザではこれを何度も行う必要があります）？

可能であれば、いくつかの設定：

• スタイルシートのルールをループするのではなく、要素からこれを行うことを好む
• 少なくとも IE 7 をサポートする必要がある (またはサポートする方法がある)
• 計算に 2 秒もかからないはずです。私はまともに実行する何かが欲しい

Web ページに複数のstyleタグがありcssRules、それらを操作したいと考えています。スタイル要素からstyleSheetas inオブジェクトを取得するにはどうすればよいですか。方法は、すべてをdocument.styleSheetsスキャンして、要素オブジェクトと一致させることができます。これより良い方法はありますか？styleSheetsdocument.styleSheetsownerNodestyle

ほとんどのブラウザー (Firefox、Opera など) では、要素の計算された Style を取得すると、 type の nice オブジェクトが返されますCSSStyleDeclaration。Chrome 28 と PhantomJS 1.9 では、番号付きのキーですべての CSS プロパティをリストし、次にプロパティ (Chrome の場合) をリストするオブジェクトを取得します。

たとえば、オペラでは次のようになります。

Chrome 28 では:

そして、最終的に役立つ部分に到達します。

PhantomJS 1.9 では、さらに悪いことに、番号付きの属性が取得され、その後、length と cssText の 2 つの名前付きプロパティのみが取得されます。

htmlの解析中にブラウザがスクリプトタグを確認すると、実行が停止し、スクリプトが実行されてから、domの解析が再び開始されます。

CSSでも同じことが起こりますか？または、CSSOM の解析と dom の解析を並行して実行できます。

アップデート

私の質問は明確ではなかったと思います.cssの読み込み順序について尋ねていませんでした.CSSファイルが含まれている順序で追加されることを知っています. 私の質問は、それらがダウンロードされると、ブラウザーは CSS の解析を行い、そうしている間、スクリプトの読み込みの場合と同様に、ブラウザーは dom の解析を停止するというものでした。私の質問が明確になったことを願っています。

1つしか使えないのに、なぜそのgetPropertyValue方法を使う必要があるのか​​教えていただけますgetComputedStyleか?

たとえば、私が理解している限り、これは機能します。

これは次と同等です。

getComputedStyleなしで使えますgetPropertyValueか？