問題タブ [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.

0 投票する
1 に答える
144 参照

javascript - Ajax コールバックでの GetComputedStyle

jQuery で ajax リクエストを呼び出していますが、返されるデータにはすべての html 要素が含まれています。応答に関連付けられたスタイルを操作したい。ノードを返す DOMParser を試してみましたが、それに関連付けられているスタイルが削除されたようです。使う予定だった

ただし、常に Null を返します。ajax 応答でスタイルを操作する方法はありますか? ajax によって返されたデータに対して計算されたスタイルを取得したい、またはそれが可能かどうかを知りたいですか? ありがとう

0 投票する
1 に答える
193 参照

javascript - ドキュメントの CSS プロパティを DOM に追加せずに解析済み要素に適用する方法

これを行う一般的な方法は、新しい要素を本文に追加してから、次の jQuery スクリプトのように計算された css 値を取得することです。

問題は、再レンダリングが遅くなるのを避けるために、DOM に追加せずにそれを行う方法です。このスクリプトは、DOM に追加せずにそれを行います。

そして、これが得られるものです: Chrome コンソールの結果

0 投票する
7 に答える
127286 参照

javascript - JS: 'Window' で 'getComputedStyle' を実行できませんでした: パラメータのタイプが 'Element' ではありません

要するに: この TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element' の意味を理解しようとしています。

http://www.wiki.org.il/index.php?title=new-page&veaction=edit

このエラーでは、新しいページを作成したり、Wiki を匿名で編集したりすることはできません。ただし、別のスキンを使用すると、エラーが消えます。

http://www.wiki.org.il/index.php/Main_Page?useskin=vector

ウィキは 1.25alpha で動作します。

0 投票する
1 に答える
3906 参照

javascript - jsdom で getComputedStyle を使用する

jsdom で色の計算されたスタイル値を取得できません。

前のテストでは、"rgb(255, 0, 0)" または "red" の代わりに "" が返されます ...
(これはブラウザーで適切に機能することに注意してください)

私は何かが恋しいですか?

0 投票する
2 に答える
50 参照

javascript - オブジェクトを適切に更新するには?

私はオブジェクトジェネレーターを持っています。正常に動作します。

しかし、後で要素のプロパティを更新しています

そしてconsole.log(d.left)間違っています。私はすでにそれを修正する方法を見つけましたが、少し汚れていると思います:

別の方法はありますか(私が好む1行)? 残念ながら、私は英語が苦手なので、質問、タイトルに誤りがあれば編集してください。

0 投票する
1 に答える
922 参照

javascript - 計算されたスタイル変更で発生するイベントはありますか?

特定の DOM 要素の計算されたスタイルが変更されたことを通知する JavaScript でリッスンできるイベントはありますか?

そうでない場合、JavaScript を使用して DOM 要素の計算されたスタイルを取得する最もブロックの少ない方法は何ですか?

0 投票する
0 に答える
236 参照

javascript - HTML DOM のリフローと再描画 CSS 宣言されたプロパティ関数

大量のCSSを設定するたびに再描画とリフローを行う代わりに、より優れたCSS関数を作成できるように関数を作成していたので(これは単なるテストケースである使用クラスを知っています)、最善の方法を見つけました1 つ目は、宣言された CSS スタイルを、インライン、埋め込み、または外部のいずれかで取得することです。こうしてexplicit_set_styles生まれた機能。それでも問題は、子要素を追加して再描画を作成していることです。これが仕組みです

  1. 宣言されたcssプロパティを取得したい要素の計算されたスタイルを取得します
  2. 同じタイプの要素を作成し、計算されたスタイルから「デフォルト」を取得します
  3. それを繰り返し、違いがあるかどうかを確認します。それは、CSS 宣言の変更である可能性が最も高いことを意味します。
  4. テスト用の type 要素を DOM から削除する

したがって、新しい DOM 要素を追加することで DOM を再描画しますが、追加しないと計算されたすべてのスタイルが 100% 空白になるため、これがデフォルトをテストできる唯一の方法です。では、比較値のデフォルト値を取得するソリューションはありますか?

それで、私はそれをおそらく2つの方法で行うことを考えていましたか?iframe を作成して追加するのではなく、それにテスト要素を追加してデフォルトを取得することで、もし私が正しければ、ブラウザから不要な CPU を消費しませんか? これをテストしましたが、戻り値は次のようになります

インライン、埋め込み、および外部 CSS によって実際に宣言されているものは次のとおりです。

0 投票する
0 に答える
237 参照

javascript - 入力テキストボックスをクリックせずにJavaScriptマウスオーバー/マウスカーソル位置を移動

mouseover および mousemove リスナーを介して、入力ボックス内にユーザーのカーソルを自動的に配置するための JavaScript メカニズムを組み合わせようとしています。

ここにほぼ完璧な実例があります: http://codepen.io/anon/pen/doxNLm?editors=101

私が抱えている問題は、Geosynchronous orbit のようなものです。カーソルが数ピクセルずれることがあります (左または右)。私の計算はおそらくひどいものですが、キャンバスが実際に測定を行うための最良の方法であるかどうかはわかりませんか? より良い方法はありますか?

  1. e.pageX から要素のカーソル座標を受け取る mousemove リスナー
  2. window.getComputedStyles(input_element) を使用したフォント スタイル
  3. arr.split('') from input_element.text 文字列: x = ['a','b','c']
  4. 配列を「forループ」してキャンバスを生成し、各文字幅を計測
  5. 値が e.pageX よりも大きくなるまで、すべての文字幅を 1 つずつ追加します
  6. 「for ループ」反復を setSelectionRange(i, i) として設定します

これを改善するための助けや提案をいただければ幸いです。ありがとう!

0 投票する
1 に答える
7573 参照

javascript - window.getComputedStyle が、Chrome 以外の他のブラウザーの省略形プロパティに対して機能しない

window.getComputedStyle は Chrome でスタイルの値を提供しますが、firefox と Microsoft Edge では空の文字列を提供し、Internet Explorer ではそのメソッドをサポートしていないと言います。これが私のコードです。

Upvote 画像がクリックされるたびに、upDownVote()関数が起動され、2 つの引数が渡されます。これがHTMLです。

ajax を介して 3 つの変数を php スクリプトに渡しました。ID、タイプ、適用可能。Type には、インクリメントまたはデクリメントのいずれかの値を 1 つ格納できます。

欲しかった、賛成ボタンもクリックされます。投票値が1つ増え、ボタンの背景が変わります。ボタンの反対票も同じですが、ここでは投票値が減少しています。これをtype変数で処理します。

賛成票が再度クリックされる (またはユーザーがダブルクリックする) と、投票値が増加するのではなく、減少する必要があります。これは、if 条件内にネストされた if 条件で処理しました (タイプがインクリメントの場合)。その状態で、applicableが1より大きいかどうかを確認しました。そうであれば、デクリメントに変更しtypeて 0 に適用し、背景も元の画像に変更しました。

しかし、ユーザーが反対票ボタンをクリックした後に賛成票ボタンをクリックした場合はどうでしょうか。その状態で、applicable値は 1 より大きくなります。そして、typeデクリメントに変更する必要があります。そんなことはあってはなりません。このため、ネストされたif条件で、反対票ボタンの背景も確認します。ページがロードされる前と同じである必要があります。

該当する値が 1 より大きい場合 (ユーザーが反対票をクリックする前に賛成票をクリックした場合)。私のphpスクリプトでは、投票値を2つ増やします。

反対票ボタンの同じロジック。

ここに JavaScript があります。

upvoteとの CSS downvote

すべてが正常に動作しますが、今は立ち往生しています。window.getComputedStyleすべてのブラウザーで正常に機能しないボタンの背景値を取得する方法。background プロパティを持つことができる他のプロパティがあることを知りたいです。

また、異なるロジックで同じことを行う方法を知りたいです。の解決策が見つからない場合window.getComputedStyle

0 投票する
1 に答える
2192 参照

javascript - getComputedStyle プロパティ値

作成した楕円 div の境界半径の値を報告しようとしていますが、未定義の値が返されます。誰でも理由を説明できますか?私は単純な間違いを犯していますか、それとも私のコードに何か問題がありますか? ありがとうございました!

編集:「border-bottom-left-radius」と「borderBottomLeftRadius」の両方を同じ結果で試しました。どちらを使用すればよいですか?