Jsdom: offsetWidth、offsetHeight、offsetTop、およびoffsetLeft

作成日 2011年02月01日 · 32コメント · ソース: jsdom/jsdom

HighChartsのサーバー側レンダラーを実装しようとしています。結果のSVGマークアップに、x、y、幅、高さの値がいたるところにないことを除いて、すべてが正常に機能しているように見えます。いくつかのデバッグを通じて、offsetWidth、offsetHeight、offsetTop、offsetLeftがすべて要素ごとに未定義であるという事実に問題を特定したと思います。

これらのプロパティは、将来のリリースに含まれる予定ですか？また、当面は実装できる回避策はありますか？

css feature layout needs tests

ソース

compmodder26

👍7

最も参考になるコメント

私はこのスニペットをサポートに使用します。これは私の場合に機能します。適切な実装にはほど遠いことを覚えておいてください。 windowはdocument.parentWindow必要があることに注意してください。

より良い実装が必要な場合は、仕様を使用してコードを拡張します。
http://dev.w3.org/csswg/cssom-view/#dom -htmlelement-offsetleft

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginLeft) || 0; }
  },
  offsetTop: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginTop) || 0; }
  },
  offsetHeight: {
    get: function() { return parseFloat(window.getComputedStyle(this).height) || 0; }
  },
  offsetWidth: {
    get: function() { return parseFloat(window.getComputedStyle(this).width) || 0; }
  }
});

tobyhinloopen 2014年12月27日

👍47 ❤19 😕6 🎉4

全てのコメント32件

http://www.w3.org/TR/cssom-view/を実装する必要があると思い

tmpvar 2011年02月01日

SVGの問題のいくつかを解決するはずのcssomの統合を開始しました。

tmpvar 2011年06月19日

offset *プロパティにアクセスできれば、キャンバス関連のプロジェクトに必要になります。

jgautheron 2011年09月10日

この問題の進捗状況はどうですか？ Highchartsを使用したバックエンドサグレンダリングのこのような機能もありがたいです。

telesma 2011年10月27日

私もこれが欲しいです:)

damac23 2011年11月15日

助けになる予備のサイクルはありますか？個人的にはsvg1.1は必要ありませんが、皆さんもそれに取り組むのに十分なほど興奮していれば、着陸を手伝ってあげたいと思います。

tmpvar 2011年11月16日

@tmpvar ：お手伝いしたいのですが、サーバーサイドのJS関連のものはかなり新しいです。
多分あなたはどこから始めるべきか私にヒントを与えることができ、私は何かを動かすために最善を尽くすことができます:)

damac23 2011年11月24日

サーバーでhighchartsを有効にするために、SVG1.1にも非常に興味があります。ヘルプを提供したいのですが、最初にSVG 1.0とその現在のjsdomでの実装について理解する必要があります。これには、しばらく時間がかかる場合があります;）

href 2011年11月28日

ここでの最初のステップは、テストスイート（http://www.w3.org/Graphics/SVG/WG/wiki/Test_Suite_Overview）のコピーを取得し、それをヘッドレスに変換することだと思います（これはかなりの作業かもしれません）

次に、 level2/svg.jsを追加して、実装を開始できます。

私はおそらくこれを最終的に回避するでしょうが、今のところjsdomの優先順位のリストの上位にはありません。

tmpvar 2011年11月29日

@href svg1.0の実装はかなりむき出しです。 level1/coreのテストに合格しますが、svg固有のものは実際には実装されていません。

tmpvar 2011年11月29日

getBoundingCLientRectが正しく実装されていないと思います。

私は特定のsvg要素を計算するためにこのコードを持っています：

var html = '<!DOCTYPE html><html><head><title></title></head><body style="margin: 0; padding: 0;"><svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1" style="margin: 0; padding: 0;"><rect style="" x="10" y="10" width="100" height="100" rx="0" ry="0"/></svg></body></html>';

        jsdom.env({
            html : html,
            src: [jquery],
            done: function (errors, window) {
                var $ = window.$;
                var clientBox = $("#svg").find(type)[0].getBoundingClientRect();
                console.log(clientBox);
            }
        });

そして結果は：

{ bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }

しかし、同じhtmlをWebブラウザーでテストすると、結果は次のようになります。

{ bottom: 110, height: 100, left: 10, right: 110, top: 10, width: 100 }

throrin19 2013年12月04日

@ throrin19 ：＃653を読んでください。

JamesMGreene 2013年12月04日

それで達成することは不可能ですか？これまでのところ、phantomJSを介してこの懸念を回避することができましたが、非常に遅く、大きなSVGがあるとクラッシュします。

throrin19 2013年12月04日

つまり、それは不可能ではありませんが、レイアウトエンジン全体を作成する必要があり、誰もそれを行う時間がありませんでした。

domenic 2013年12月04日

👎2

私はそれについて考えました、しかしそれから私の脳のけいれんと私は立ち去らなければなりません。

従うことができる酸以外のテストはありますか？

tmpvar 2013年12月05日

これが非常に望ましい機能であることがわかったら+1

ghost 2014年11月18日

より良い実装が必要な場合は、仕様を使用してコードを拡張します。
http://dev.w3.org/csswg/cssom-view/#dom -htmlelement-offsetleft

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginLeft) || 0; }
  },
  offsetTop: {
    get: function() { return parseFloat(window.getComputedStyle(this).marginTop) || 0; }
  },
  offsetHeight: {
    get: function() { return parseFloat(window.getComputedStyle(this).height) || 0; }
  },
  offsetWidth: {
    get: function() { return parseFloat(window.getComputedStyle(this).width) || 0; }
  }
});

tobyhinloopen 2014年12月27日

👍47 ❤19 😕6 🎉4

tobyhinloopenが提案したことで成功を収めた人は他にいますか？

@tobyhinloopen ：グラフの背景、軸、ラベルが表示されますが（歪んでいますが）、残りはまだ混乱しています。完全なグラフを取得できましたか？

moni-ellevest 2015年01月03日

提案された実装が機能する別のユースケースがありました。うまくいかない場合は、拡張してください。おそらくOffsetHeight / widthにはパディングも含める必要があります。完璧な実装を実装するのは難しいので、それを機能させるためにいくつかのハッキーな修正を提案します。

tobyhinloopen 2015年01月03日

@tobyhinloopenによって提案された解決策はメッセージが表示されます。

zallek 2016年06月19日

👍1

@zallekあなたはすでにoffsetLeftをサポートしていると思います：） window.HTMLElement.prototype.offsetLeftは何を返しますか？それが未定義以外の場合、私のソリューションは機能しません

tobyhinloopen 2016年06月20日

@tobyhinloopenに感謝します、あなたの解決策は私にとって非常に役に立ちました。 :)

tconroy 2016年11月30日

👍2

@tobyhinloopenソリューションを投稿していただきありがとうございます！これは非常に便利で、変数を使用してオフセットの値を設定し、 thisを除外する限り機能します。 thisは未定義で出てきます。これは、コンテキストが実際のクラスではないことを考えると、この種の意味があります。それはあなたが期待することですか？

jordantomax 2019年05月19日

❤1

@jordantomaxこれは、関数が定義されているときではなく、関数が呼び出されたときに要素にバインドされます。 'this'は、任意のhtml要素から呼び出す場合の要素である必要があります。

そうでない場合は、例を見てみたいと思います。

tobyhinloopen 2019年05月19日

@tobyhinloopen迅速な対応に感謝します。それが私が期待することです。実際のブラウザ環境を使用してcodesandboxで問題を再現しようとすると、正しく機能します。しかし、jestを使用すると、 thisが未定義として表示されます。私が経験していることを示すために小さなサンプルリポジトリを作成しました。セットアップが間違っている可能性があります。

https://github.com/jordantomax/jest-htmlelement-prototype-sandbox

関連して、jestとjsdomを使用してscrollIntoViewようなメソッドをオーバーライドするのにも問題があります。それを行うための推奨される方法はありますか？

どうもありがとうございました！

jordantomax 2019年05月22日

get: () => {}を使用しているためだと思います- () => {}関数の構文がthis台無しにします。代わりにget() {} （推奨）またはget: function() {} （代替）を使用すると、機能します。 @jordantomax

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this

また、テストスイートのit / describe =>します。私は冗談を知りませんが、MOCHAにそれがあるため、推奨されませんthisであなたのit / test / describeのすべての種類を持っています矢印機能を使用するとアクセスできないユーティリティ。たとえば、モカにはthis.slow() 、 this.timeout(4000)などがあります。

https://mochajs.org/#arrow -functions

関連して、jestやjsdomを使用してscrollIntoViewなどのメソッドをオーバーライドする際にも問題が発生します。それを行うための推奨される方法はありますか？

通常、MDNにはある種のポリフィルがあります。それ以外の場合は、仕様に基づいてニーズに合った方法で実装してみてください。すべてが失敗した場合は、別のテスト環境を使用してください。 JSDomにはその場所がありますが、ある時点で、代わりに実際のブラウザーを検討することをお勧めします。多くのテスト環境では、実際のブラウザーでのテスト（同時に複数の場合でも）が可能であると同時に、開発マシンにリアルタイムでレポートを返します。 IIRCカルマはこれを行います-> https://karma-runner.github.io/latest/index.html

私は自分のマシンで一度に複数のブラウザー（Firefoxクロームサファリインターネットエクスプローラーエッジ+シミュレーターのモバイルブラウザー）を開いていましたが、それらはすべてKarma + Mochaを使用してリアルタイムで報告しました。

tobyhinloopen 2019年05月23日

@tobyhinloopenそうです、あなたはすべてのアカウントにいます！ありがとうございました！！ getComputedStyleが必要な理由についてはまだ少しわかりませんが、そのメソッドを指定してセッターを作成することは可能ですか。私にとって、これはうまくいくようです：

Object.defineProperties(window.HTMLElement.prototype, {
  offsetTop: {
    get () {
      return this.marginTop
    },
    set (offset) {
      this.marginTop = offset
    }
  }
})

もう一度ありがとう🙏

jordantomax 2019年05月24日

@jordantomax getComputedStyleは、適用された場所（スタイルシート、 style属性またはJSから）に関係なく、すべてのCSSプロパティの実際の計算されたスタイルをフェッチします。 this.marginTopが同じことをするかどうかはわかりませんが、そうだと思います（ただし、すべてのCSS小道具ではなく、明らかにマージンのためだけです）

tobyhinloopen 2019年05月27日

@tobyhinloopenああ、

jordantomax 2019年05月29日

ありがとう@tobyhinloopen 。私はさらに短いバージョンを使用しています。 getComputedStyleは、インラインでない限り、個人的にユニットテストにcssを追加することは決してないので、実際には必要ないと思います。そのため、 .styleで十分かつ高速です。

Object.defineProperties(window.HTMLElement.prototype, {
  offsetLeft: {
    get () { return parseFloat(this.style.marginLeft) || 0 }
  },
  offsetTop: {
    get () { return parseFloat(this.style.marginTop) || 0 }
  },
  offsetHeight: {
    get () { return parseFloat(this.style.height) || 0 }
  },
  offsetWidth: {
    get () { return parseFloat(this.style.width) || 0 }
  }
})

ghost 2020年03月21日

👍3

これは修正されましたか、offsetWidth = 0を取得しています

   const dom = new JSDOM(`<!DOCTYPE html><body></body>`);
    let document = dom.window.document
    let span = document.createElement("span");
    span.innerHtml = 'test
    span.style.fontSize = 150 + 'px';
    span.style.fontFamily = 'Arial'
    document.body.appendChild(span)
    console.log(span.offsetWidth) // 0

petran 2020年10月17日

これは修正されましたか、offsetWidth = 0を取得しています

@petranフォントのサイズと継承されたすべてのCSSプロパティの知識が必要なため、jsdomがSPANの幅を計算することを期待するのは現実的ではありません。それがJSDOMの目標ではないと思います。ブラウザのより正確なシミュレーションが必要な場合は、実際のブラウザの使用を検討してください。

tobyhinloopen 2020年10月17日

👎1

このページは役に立ちましたか？

0 / 5 - 0 評価

Jsdom: offsetWidth、offsetHeight、offsetTop、およびoffsetLeft

最も参考になるコメント

全てのコメント32件

関連する問題