标签: getboundingclientrect

我有<textarea>元素并在其中创建范围：

• 通过创建新范围document.createRange()
• <textarea>获取via的唯一子节点textarea.childNodes[0]
• range.setStart通过和设置范围开始和范围结束range.setEnd

然后我打电话range.getBoundingClientRect()：

let textarea = document.querySelector('textarea');
let node = textarea.childNodes[0];

let range = document.createRange();
range.setStart(node, 3);
range.setEnd(node, 5);
console.log(range.getBoundingClientRect());

<textarea>aa bb cc</textarea>

但我收到ClientRect全零字段的对象，即left = top = width = height = 0. 为什么这些字段为零？

<textarea>请注意，如果我用普通的 div替换，一切正常：

let textarea = document.querySelector('div');
let node = textarea.childNodes[0];

let range = document.createRange();
range.setStart(node, 3);
range.setEnd(node, 5);
console.log(range.getBoundingClientRect());

<div>aa bb cc</div>

是否有使用Puppeteer的C#API？

用例:需要获取HTML的坐标/边界框.可以使用Selenium + PhantomJS,但考虑到PhantomJS的不稳定性问题,我们想试试Puppeteer.

有人可以帮忙吗？

我已经构建了一个组件，它将根据其在窗口中的尺寸和位置来确定其打开方向。我在 react-dom 节点上使用了 getBoundingClientRect() 函数。现在我已经更新了一些项目包，包括 react 和 react-dom 到 16.3.2。现在我得到一个编译错误：

Property 'getBoundingClientRect' does not exist on type 'Element | Text'

这是使用此功能的一段代码：

const node = ReactDOM.findDOMNode(this.containerElement);

if (!node) {
  return;
}

let vertical: Vertical_Direction;
if (verticalDirection === Vertical_Direction.DOWN_UP) {
  const windowHeight = window.innerHeight;
  const height: number = Math.min(containerHeight, node.getBoundingClientRect().height);

任何实现此功能的帮助或建议将不胜感激。

Edit2：这个问题的原因是更新@types/react-dom 到 16.0.5 版本。

我想以可靠的方式找出 DOM 元素的尺寸。

我的考虑是为此使用 getBoundingClientRect 。

  const elementRef = useRef<HTMLUListElement | null>(null);
  const [dimensions, setDimensions] = useState<DOMRect | undefined>();

  const element: HTMLUListElement | null = elementRef.current;

  /**
   * Update dimensions state.
   */
  const updateDimensions = useCallback(() => {
    if (!element) return;

    setDimensions(element.getBoundingClientRect());
  }, [element, setDimensions]);

  /**
   * Effect hook to receive dimensions changes.
   */
  useEffect(() => {
    if (element) {
      updateDimensions();
    }
  }, [element, updateDimensions]);

这种方法的问题是 useEffect 只对 elementRef.current 做出反应，而不对 rect 的变化做出反应。显然浏览器中组件的绘制还没有完成，因为尺寸总是0。

如果我在 useEffect 之外做整个事情，那么它就可以工作。在控制台中，我看到 0 的 2 倍值，然后是正确的尺寸。

使用效果： …

背景:我目前正在开发一个项目,我的JS应用程序嵌入到其他多个(父)JS应用程序中.某些父应用可以通过将display:block/none设置为包含我的应用的某个元素来显示/隐藏我的应用.其他父应用程序暂时从DOM中删除我的应用程序并稍后重新附加.很少有父应用程序使用shadow dom,因此我无法访问父应用程序中的元素.

我需要一种方法来检查我的应用程序是否可见(在DOM内部并显示;不关心可见性:隐藏并且不必在视口内),而不更改父应用程序,因此我查看了getBoundingClientRect.

问题:至少在chrome上,如果元素或其祖先有display:none或者从DOM中删除它,则getBoundingClientRect返回(w:0,h:0,l:0,t:0).我找不到关于这种行为保证的任何文档,我想知道,如果它是安全的(在某种意义上这个逻辑不会改变)使用getBoundingClientRect来检查元素的可见性.

此外,我需要知道这种行为是否在所有主流浏览器中都是一致的,包括FF,IE8 +和Safari.这记录在哪里？

最后,为什么(0,0,0,0)？我觉得getBoundingClientRect应该在这种情况下返回null,因为(0,0,0,0)实际上意味着不同的东西.这有充分的理由吗？

编辑/附加问题:感谢istos指出返回null可能会破坏一些毫无疑问的代码,例如:

console.log(clientRectObject.height);
// TypeError: Cannot read property 'height' of null

不要抱怨当前的行为,而是作为一个设计问题:而不是null,可以返回一些非法的Rect值(例如负宽度和高度)是一个更有用的替代方案吗？

我正在使用Range对象和Element.getBoundingClientRect()来计算某些文本的位置.我在Chrome和Firefox中获得了预期的结果,但在IE中,顶级属性值是错误的.

更具体地说,包含在具有行高度值的span元素中的文本.这个粗俗的小提琴说明了问题https://jsfiddle.net/eekr4qhs/

示例HTML

<div style="display:inline-block; width:100px;height:500px; background-  color:red">
    <span id="span1" style="line-height:500px">
        text
    </span>
</div>

代码段

var spanEl = document.getElementById("span1");
var textNode = spanEl.childNodes[0]; 
var offsetStart = 0;
var offsetEnd = textNode.nodeValue.length || 0;

var range = document.createRange();
range.setStart(textNode, offsetStart);
range.setEnd(textNode, offsetEnd);

var rect = range.getBoundingClientRect();
console.log(rect.top);

在计算范围的DOMRect时,IE似乎没有考虑行高属性值

如果我在Chrome中打开小提琴,我会得到249.09722900390625作为rect的顶部,而在IE 11中,top是8

有没有人以前见过这个问题,并且有一些方法让IE返回正确的边界客户端矩形？

我试图找到一个用 React 渲染的组件的位置。我正在使用 redux，所以我不得不将连接函数修改为：

export default connect(mapStateToProps, mapDispatchToProps,null,{ withRef: true })(MyComponent);

现在，当我打电话时，我得到了一个组件：

class OneColumn extends Component { 
    componentDidMount(){

        var input = this.refs.myComponentsRef.getWrappedInstance();

        console.log(input); // Outputs > TheComponentIWant {props: Object, context: Object, refs: Object, updater: Object, _reactInternalInstance: ReactCompositeComponentWrapper…}

        var inputRect = input.getBoundingClientRect(); 
        console.log(inputRect); // Outputs error: Uncaught TypeError: input.getBoundingClientRect is not a function
    }
//...
}

所以我可以获得组件，但是我无法获得 boundingClientRect。

我忽略了什么？

请帮忙：）

getBoundingClientRect()当涉及具有给定笔画宽度的 SVG 路径时，不同浏览器的实现有所不同，像Firefox 这样的浏览器包括笔画宽度（例如，与 Chrome 不同）。

通过“包括笔划宽度”，我希望边界框包含带有笔划的路径，但没有其他内容。然而，正如您在这个基本示例中所看到的，在 Firefox 中，笔划宽度似乎在整个元素周围创建了一个额外的边框，其值是笔画宽度本身的两倍：

console.log(document.querySelector("path").getBoundingClientRect())

path {
  stroke: black;
  stroke-width: 30px;
}

<svg>
  <path d="M0,20 L300,20"></path>
</svg>

这是上面代码片段的屏幕截图，检查元素：

正如您所看到的，不仅getBoundingClientRect()开发工具检查器得到的边界矩形错误（420x120而不是300x30。值得一提的是，Chrome 和 Safari 将返回300x0，如第一段所述）。

这是预期的行为吗？

我有一个函数来评估一个元素（一个 iFrame）是否在视口内，如果该元素在视图中它返回 true。

function isElementInViewport() {
    var el = document.getElementById('postbid_if')
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    console.log("eleTom " + elemTop)
    console.log("elemBottom " + elemBottom)
    console.log("window.innerHeight " + (window.innerHeight + (window.top.innerHeight * 0.5)))

    var isVisible = (elemTop >= 0) && (elemBottom <= (window.innerHeight + window.innerHeight * 0.5));
    return isVisible;
}

当直接在页面上提供时，此函数可以正常工作，但在实时环境中，当此函数运行时，它位于 iFrame 内，并且看起来像是getBoundingClientRect()在引用 iFrame 的视口而不是主窗口？

有什么方法可以在 iFrame 中使用主窗口视口 getBoundingClientRect()

function test(o) {
    console.log("Object:", o);
    console.log("Assign test:", Object.assign({}, o));
    console.log("Keys test:", Object.keys(o));
    console.log("JSON test:", JSON.stringify(o));
}

var el = document.getElementById("question");                 /* or document.body */

test(el.style);                                               /* works as expected */
test(el.getBoundingClientRect());                             /* behaves like {} */
test(Object.assign(el.getBoundingClientRect(),{aaaa: 1111})); /* works... only for aaaa */

为什么？

输出（测试结果）

参见PasteBin。

MDN文档

1. Element.getBoundingClientRect（）
2. DOMRect

我试图将a <div>放置在用户文本选择上方，该文本选择将充当类似于Mediums的工具栏。

虽然我已经成功<div>地将定位在选择旁边，但是我似乎无法使它相对于选择正确居中：

    $(function() {
      // Setup the Event Listener
      $('.article').on('mouseup', function() {
        // Selection Related Variables
        let selection = window.getSelection(),
        getRange      = selection.getRangeAt(0),
        selectionRect = getRange.getBoundingClientRect();

        // Set the Toolbar Position
        $('.toolbar').css({
          top: selectionRect.top - 42 + 'px',
          left: selectionRect.left + 'px'
        });
      });
    });

我可以这样确定选区的中心点：减去选区的宽度，使选区从视口向左偏移：

 selectionRect.left - selectionRect.width

但是，我不确定如何使用它来设置工具栏相对于选择矩形居中的位置吗？

我尝试从选择的宽度除以2减去工具栏的左偏移量，但这也不完全与中心对齐。

JSFiddle

https://jsfiddle.net/e64jLd0o/

我有一个来自 mouseup 事件的 xy 对象，我想知道该 xy 是否存在于视口中元素的boundingClientRect 内。我可以从 getBoundingClientRect 方法获取元素的左、右、上、下值。我想知道 xy 是否在元素 rect 内。

我刚刚遇到了一个弹跳箱计算的问题,似乎我还没有掌握全部真相.

首先,边界框被定义为最紧密的框,未转换的元素可以被包围.

我总是在印象中,对于团体而言,这意味着它基本上得到了所有孩子的边界框的联合.

但是,今天我遇到了这个:

<g id="outer">
  <g id="inner" transform="translate(100, 100)">
    <rect x="0" y="0" width="100" height="100" />
  </g>
</g>

元素的边界框如下:

• rect: x: 0, y: 0, w: 100, h: 100
• #inner: x: 0, y: 0, w: 100, h: 100
• #outer: x: 100, y: 100, w: 100, h: 100

我的期望是,所有的盒子都是相同的,但正如你所看到的,外盒不是内部元素的结合(在这种情况下,它将等于#inner的bbox).相反,它考虑了内部元素的转换.

那么,说一个组的bbox是其孩子的TRANSFORMED bbox的联盟是对的吗？或者更编程地说,所有getBoundingClientRect调用的并集(假设滚动为0因为getCoundingClientRect忽略滚动)？

我真的很感激链接指向我的规格的正确部分.