What is the meaning of the name getBoundingClientRect()?

Naming JavaScript methods can be a challenging task, I’d assume because one may want to name it as clear as possible but also short as possible.

I fail to understand the rationale behind this naming:


  1. Getting, or putting?
  2. Bounding, as in "boundaries "?
  3. I know that if you put a bound over or more element/s, you borderize any such element, making any such element to have its own scope. Is this the case here?
  4. ClientRect likely means “The rectangular of the client” but why did the EcmaScript team had to theorize that we want to “capture” only rectangles (or didn’t they)?

This link may help your understanding…

MDN - Element: getBoundingClientRect() method

1 Like

First note that getBoundingClientRect() is not JavaScript. It is used in JavaScript but it is part of the HTML DOM, as specified in CSSOM View Module.

Think of bounding being a synonym for containing.

There is also a getClientRects() method that returns a collection of bounding rectangles.

I do not understand that question.

1 Like

I meant to ask

Why is it getBounding instead of, say, setBounding?

I understand that to put a “boundary” on one or more thing/s is setting a bound on it/these.

Because the function is getting the data, not setting anything. I don’t understand why you seem to think it might be setting something and thus poorly named.

The function tells you the size of an element and it’s location relative to the view port. In other words, it tells you what size of rectangle you would need to create and where you would need to position that rectangle to completely cover the element in question.

As such, you could take the rectangle returned by the function and apply it’s properties to another DIV element with position: fixed and it would completely cover the original element.

1 Like

Me too. I also do not understand the confusion. In addition to what you said I want to add that the function returns a value. It has no arguments. If it were setting something then it would need at least one argument to know what to set.

The boundary was previously set by something else.

@kicken and @SamuelCalifornia okay, that’s a good start for me, it gets data, not sets data.

Than what I think I misunderstand is what a “bounding client rectangle” is.

It’s obvious to me that “client” here means to the client who visits the webpage and gets an output.

But then what is a “bounding rectangle”?

That’s where my confusion about the name is… I think.

The link that I provided in post #2 also provided that information…

MDN - Examples

No it does not mean that.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.