問題タブ [getcomputedstyle]
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 - ブラウザーの開発ツールから計算されたスタイルを取得するにはどうすればよいですか?
getComputedStyle を使用して、要素の計算されたすべてのスタイルを収集しています。しかし、「animation-duration」、「direction」、「ime-mode」などの多くの不要なプロパティが返され、合計で 200 以上のプロパティが生成されます。一方、ブラウザーの Web 開発ツールバーには、関連する計算されたスタイルのみが表示されます。それらにアクセスするにはどうすればよいですか?
編集:申し訳ありませんが、質問はこれと重複している可能性があります(後者は特にGoogle Chromeに関するもののようです)。
javascript - ::before 要素のコンテンツ プロパティがまったく指定されていないことと、空の文字列として指定されていることを区別するにはどうすればよいですか?
「コンテンツ」プロパティが擬似要素の前または後に設定されている場合、javascript (jQuery を使用) でチェックインするにはどうすればよいですか? クロムでwindow.getComputedStyle(elem, '::before').getPropertyValue('content')
は、'content' が空の文字列に設定されている場合とコンテンツが設定されていない場合の両方で、空の文字列を返します。
私は 1 つの解決策を考えました。幅や高さなどの他のプロパティを設定し、計算されたスタイルが影響を受けるかどうかを確認します。ただし、getComputedStyle の呼び出し回数を最小限に抑えたいと考えています。
ありがとう
javascript - 外部 URL の計算された CSS を取得するには?
外部 URL からさまざまな HTML タグの計算されたスタイルを取得することは可能ですか?
getComputedStyle は、自分の Web ページから計算されたスタイルを取得するのに役立ちますが、他の Web ページからさまざまな要素の CSS 値を抽出したいと考えています。
私が見つけようとしているのは、たとえば、http://www.smashingmagazine.com/のような特定の URL からの H1 要素のフォントサイズと H2 要素の色です。
これは可能ですか?(NodeJS エクスプレス サーバーと ajax を使用している可能性がありますか?) よろしくお願いします。
jquery - DOM 外で jQuery クローンを使用する
.clone()
jQueryメソッドを使用している小さなプロジェクトに取り組んできました。これの落とし穴は、一意の識別子を持つ HTML で使用することです。そこでgetComputedStyle
、元のユニークな要素のスタイル プロパティを見つけて、それをクローンにコピーし、後で新しい ID を与えるために実装を続けました (はい、パフォーマンスの問題が発生する可能性がありますが、実験的です)。
jQuery の仕様によると、クローン作成後、追加前にこれを行うと、DOM の外部で操作が行われます (したがって、ID の「違反」は発生しません)。しかし、オブジェクトが複製された後、要素のスタイル プロパティを見つけようとすると、ブラウザー全体で奇妙な動作に気付きました。それ以前は、すべてのブラウザーが同じ値を返しますが、複製された後は次のようになります。
Firefox - 気楽で、興味深いことに、クローンの計算されたスタイルは、計算されたデータ (ピクセル単位) ではなく、実際の CSS 値です。
IE - 動作しているように見えますが、値は必ずしも正しいとは限りません。
Chrome - 計算しません。例を次に示します。
http://codepen.io/anon/pen/zxqmNK?editors=011
これがバグなのか、以前に同様の動作が見られたのか知っている人はいますか? Web に関してはそれほど多くはありません (Stackoverflow でさえも)。洞察をお寄せいただきありがとうございます。
編集 - さらにテストを行ったところ、IE は Chrome と同じように動作するようです。何も返さない代わりに、すべてが「自動」に設定されています。を使用してクローン オブジェクトのスタイルにアクセスする.css()
と、すべての値が返されます0px
(背景などのプロパティを含む)。複製されたオブジェクトを、あたかも何らかのスタイルが適用されたかのように扱うのは Mozilla だけのようです。
javascript - GetComputedStyle.getPropertyValue の DOM 要素をトラバースすると常に Null が返される (Chrome 拡張)
特定の Web ページに (font-size プロパティから) 表示される最大のテキストを取得する JavaScript 関数 (Chrome 拡張機能で使用) を開発しています。
ajax 呼び出しによって指定されたページのコンテンツを取得し、呼び出しによって返されたデータが DomParser に変換されます。DOM をトラバースすると、次のようなさまざまな要素が得られます。
を使用して要素のスタイルを取得する関数を作成しましたgetComputedStyle
。私が持っているロジックは次のとおりです。
関数は約 460 の異なる要素 (テスト ページ) を取得しますが、font-size は常に nullです。これを設定するのを手伝ってもらえますか?
window.getComputedStyle
トラバースされたすべての要素の [object CSSStyleDeclaration] オブジェクトを返します。
Document.getAttribute('attribute-name')
動作していますが、計算結果ではなくインライン結果のみが得られます。同じ結果を達成するための他の提案があれば、私もそれらを受け入れます。
ありがとう