問題タブ [computed-style]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - currentStyle と getComputedStyle の Firefox の問題
CSS ルールに従って要素の幅を取得しようとしています 問題は、CSS 幅値が設定されていない要素に対して、「getComputedStyle」が「auto」ではなくピクセル値を返すことです。Opera では、「elem.currentStyle['width']」は「auto」を返しますが、firefox では、「1149px」などを返す「getComputedStyle」を使用する必要があります。
実際の CSS ルールが何であるかを知ることは、私にとって非常に重要です。getComputedStyle以外にこれを行う方法はありますか? Firefox MDNは、「getComputedStyle」が適していないことを明確にしていますが、「currentStyle」に相当する Firefox のドキュメントを見つけることができません。
知りたい場合は、私の最終目標は、ページ上で最大の静的幅要素を見つけることです。スタイルシートの値を読み取れない場合 (レンダリング/計算された値のみ)、どうすればこれを達成できますか?
javascript - HTMLページから完全なDOMツリーを抽出する方法
2つのWebページを比較して、それらの間に違いがあるかどうかを分析する必要があります。問題は次のとおりです。すべてのDOM要素(javascriptを介して動的に追加される要素も含む)を含める必要があり、適用されたすべてのCSS設定(別名計算スタイル)を含める必要があります。
たとえば、CSS:hover
設定が定義されている場合、マウスが要素の上にあるときと、要素の上にないときでは、異なる結果を取得する必要があります。
たぶん、ページのすべての要素でjavascriptの反復を行い、すべてのcss設定とすべての子DOM要素を要求することができます。しかし、これには長い時間がかかり、結果のDOMが壊れて、比較が難しくなると思います。
何か案は??ありがとう!!
javascript - getComputedStyle オブジェクトにはメソッドが含まれていますか?
ここでデモをセットアップしました: http://jsbin.com/evifeb/
これは、適切な質問というよりも、大声で考えている私のことですが..
ブラウザーがメソッドや予約語と一緒に計算済みスタイル オブジェクトにスタイル ルールを直接挿入するのはなぜですか? 解析が難しくなるだけです。たとえば、私のデモでは、文字列と数値以外のすべてを除外していることに気付くかもしれません。これは、同じスコープ内にある関数を除外するためです。ただし、長さプロパティの値は数値であるため、これは 100% 正確ではありません。スタイルのオブジェクトを無意味に返す「getAllStyles」のようなプロトタイプ関数を使用しないのはなぜですか?
OKAY「getPropertyValue」は知っていますが、それは指定されたスタイルルールが必要な場合にのみ役立ちます..だから私が言おうとしているのは次のとおりだと思います: A) 交差しているオブジェクトを返す適切な方法はありますか?ブラウザセーフ?B)そうでない場合、長さ以外に取り除く必要のある他のプロパティ(css仕様にない)はありますか?
助けてくれてありがとう。歯を抜く準備が整いました。
javascript - 計算されたスタイルに一致する要素についてDOM全体をクエリする方法は?(純粋なjsで)
たとえば、計算されたスタイルを持つすべての要素を検索したいと思いますposition: fixed;
。CPUに大きな負荷をかけずにそれを行う方法は?
毎回繰り返してgetElementsByTagName('*')
からforループを実行するのが唯一の方法ですか?
performance - JavaScriptを使用してChromeで現在のスタイルを取得するには遅すぎます
私は愚かな問題で立ち往生しています。以下は、domの計算されたスタイルを取得するための私のコードです。それはFireFox、さらにはIE(驚いた)でもうまく動作します!しかし、chrome v17では遅すぎます(20倍遅くなります)。問題を回避する方法は?
助けてください!
javascript - DOMの現在のスタイルのエクスポート
ノードまたはノードのセットの現在のスタイル情報(セレクターとそれに関連するCSSルール、幅と高さの属性、スタイル属性など)を取得してXMLドキュメントなどに保存するJavaScript DOM APIはありますか?
自動比較テストをしたい。
助けてくれてありがとう。
jquery - コンテンツに基づいて iframe の高さを動的に調整する
iframe の高さを動的に変更する方法については、多くの回答があります。プラグインを試しましたhttps://github.com/house9/jquery-iframe-auto-height
プラグインは iframe の読み込みで動作しますが、コンテンツがリロードされない場合 (たとえば ajax)、iframe コンテンツ内の変更に基づいて高さが動的に変更されることはありません。
私の質問は: コンテンツの高さが変わるときに iframe の高さを動的に変更する方法は?
jquery - font-sizeを16ptに設定しましたが、フェッチすると21pxが返されます。ptを返すようにできますか?
重複の可能性:
jqueryを取得してフォントサイズをポイントで返す
jQueryを使用して、以前のバージョンのWebアプリケーションで行っていた16ptに設定しています。問題は、コードを次のように設定した後のある時点です。
私はそれをフェッチする必要があります。フェッチすると、16ptではなく21pxが返されます。使用できる変換率、または16ポイントを取得する方法はありますか?
渡す必要のあるオプション、またはそれを処理する別の方法はありますか?
この質問へのフォローアップとして、私は物事が私が構築しているものに彼らがすべきように彼らが見ているように見えていないことに気づきました。私のデータを保持しているテキストボックスは、特定の情報を保持しているようです。以下がうまくいかない理由を知っていますか?
javascript - window.loadの前に計算されたCSSスタイルを取得するにはどうすればよいですか?
マークアップで何百もの大きな写真を含むカスタムスライドショーページがあります。さらに、CSSだけでは実行できないレイアウトの調整があり、javascriptが必要です。その調整は、いくつかのページ要素の計算されたCSSスタイルに依存します。
ここに問題があります:計算されたCSSスタイルをオンにする(document).ready
ことはうまくいかないようです。DOMが登録されているだけの場合、レイアウト/ペイントはまだ行われていないため、これは完全に理にかなっています。
(window).load
ここでの明白な答えです。(window).load
ただし、この場合、100以上の大きな画像がすべてダウンロードされるまで、文字通り30秒(低速接続ではさらに長くなります)かかるため、待機時間は非常に長くなります。スライドショーは、最初の2つの画像が読み込まれると、すべての画像が読み込まれるずっと前に使用できるようになるため、原則としてこれで問題ありません。問題は、その時点でもスクリプト化されたCSSレイアウト修正を実行したいということです。
ロードされているimgを確認するために、imageLoadedを使用しています。これは素晴らしい機能であり、imgsで使用した場合のjqueryのload
イベントの問題を回避します。しかし、divなどのページ要素で「ロード」のようなイベント(および計算されたスタイルの可用性)を確認するにはどうすればよいですか?(divはロードイベントを発生させないことに気付きました。)原則として、信頼できるクロスブラウザーDOMイベントが間に(document).ready
あり(window).load
、特定の要素セットをリッスンして計算されたスタイルを取得できますか?それとも、これら2つの時間的極値のどちらかを選択する必要がありますか?