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일

오프셋* 속성에 액세스할 수 있다면 정말 좋을 것입니다. 캔버스 관련 프로젝트에 필요한 속성입니다.

jgautheron 에 2011년 09월 10일

이 문제의 진행 상황은 어떻습니까? Highcharts를 사용하여 백엔드 처짐 렌더링을 위한 이러한 기능도 감사합니다.

telesma 에 2011년 10월 27일

이것도 갖고 싶네요 :)

damac23 에 2011년 11월 15일

도움이 될 여분의 사이클이 있습니까? 개인적으로 저는 svg 1.1이 필요하지 않지만 여러분도 작업할 수 있을 만큼 충분히 의욕이 솟는다면 기꺼이 도와드리고 싶습니다.

tmpvar 에 2011년 11월 16일

@tmpvar : 도움을 주고 싶지만 서버 측 JS 관련 항목은
어디서 시작해야 하는지 힌트를 주시면 최선을 다해 작업을 진행할 수 있습니다. :)

damac23 에 2011년 11월 24일

서버에서 하이차트를 활성화하기 위해 SVG 1.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 svg 1.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을 테스트하면 결과는 다음과 같습니다.

{ 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이 제안한 솔루션은 괜찮아 보이지만 사용할 때 "세련된 속성 offsetLeft를 사용할 수 없음"이 표시됩니다.

zallek 에 2016년 06월 19일

👍1

@zallek 이미 offsetLeft 지원이 있다고 생각합니다 :) window.HTMLElement.prototype.offsetLeft 는 무엇을 반환합니까? 정의되지 않은 경우 내 솔루션이 작동하지 않습니다.

tobyhinloopen 에 2016년 06월 20일

@tobyhinloopen에 감사 인사를

tconroy 에 2016년 11월 30일

👍2

@tobyhinloopen 솔루션을 게시해 주셔서 대단히 감사합니다! 변수를 사용하여 offset 값을 설정하고 this 제외하는 한 매우 유용하고 작동합니다. this 는 정의되지 않은 상태로 나오는데, 컨텍스트가 실제 클래스가 아니라는 점을 감안할 때 일종의 의미가 있습니다. 그것이 당신이 기대했던 것입니까?

jordantomax 에 2019년 05월 19일

❤1

@jordantomax 이것은 함수가 정의될 때가 아니라 함수가 호출될 때 요소에 바인딩됩니다. 'this'는 html 요소에서 호출할 때 요소여야 합니다.

그렇지 않은 경우 예제를 보고 싶습니다.

tobyhinloopen 에 2019년 05월 19일

@tobyhinloopen 빠른 답변 감사합니다. 그것이 내가 기대하는 것입니다. 실제 브라우저 환경을 사용하여 코드샌드박스에서 내 문제를 재현하려고 하면 올바르게 작동합니다. 그러나 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 의. JEST에 대해서는 잘 모르겠지만 this 의 it / test / describe 에는 모든 종류의 화살표 기능을 사용하는 경우 액세스할 수 없는 유틸리티. 예를 들어, 모카에는 this.slow() , this.timeout(4000) 등이 있습니다.

https://mochajs.org/#arrow -함수

관련하여 jest 및 jsdom을 사용하여 scrollIntoView와 같은 메서드를 재정의하는 데 문제가 있습니다. 권장하는 방법이 있습니까?

일반적으로 MDN에서 사용할 수 있는 일종의 폴리필이 있습니다. 그렇지 않으면 요구 사항에 맞는 방식으로 사양을 기반으로 구현하려고 시도하십시오. 모두 실패하면 다른 테스트 환경을 사용하십시오. JSDom이 그 자리를 차지하고 있지만 어느 시점에서 대신 실제 브라우저를 고려하고 싶을 수도 있습니다. 많은 테스트 환경에서 실제 브라우저(동시에 여러 개 포함)에서 테스트할 수 있으며 동시에 개발 시스템에 실시간으로 다시 보고합니다. IIRC Karma는 이것을 수행합니다 -> https://karma-runner.github.io/latest/index.html

내 컴퓨터에서 한 번에 여러 브라우저(파이어폭스 크롬 사파리 인터넷 익스플로러 에지 + 시뮬레이터의 모바일 브라우저)를 열었고 모두 Karma + Mocha를 사용하여 실시간으로 다시 보고했습니다.

tobyhinloopen 에 2019년 05월 23일

@tobyhinloopen 맞아요 당신은 모든 계정에 있습니다! 감사합니다!! getComputedStyle 가 필요한 이유에 대해 여전히 약간 불분명하며 해당 방법이 주어지면 setter를 작성할 수 있습니다. 나를 위해 이것은 작동하는 것 같습니다.

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 감사합니다. 더 짧은 버전을 사용합니다. 나는 개인적으로 인라인이 아닌 한 단위 테스트에 CSS를 추가하지 않기 때문에 getComputedStyle 가 실제로 필요하지 않다고 생각합니다. 이것이 .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 댓글

관련 문제