Course: JavaScript

Progress (0%)

Dimensions Quiz

Quiz 26 8 questions

Prerequisites for the quiz

  1. Whole JavaScript Dimensions unit

Are you ready?

8 questions to solve

  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
The element ele has the following properties. What will ele.getBoundingClientRect().width return?
  1. width: 50px
  2. padding: 10px
  3. box-sizing: border-box
Refer to Bounding Box for more info.
Like alert(), getBoundingClientRect() is a method on the window object. True or false?
getBoundingClientRect() is a method on element nodes, NOT on the window object.
Which of the following statements always returns the distance between the element ele's top edge and the top of the viewport?
For a given element node ele, what does ele.offsetTop return?
Which of the following is the most browser compatible way, as compared to the other, in determining the height of an element div?
Billy wants to change the color of the div element, shown below, to orange when its width exceeds 300px.
<div id="div1" style="color: purple">A div</div>

He writes the following code:

// change div's color to orange if width greater than 300px
var div = document.getElementById("div1");
if ( > 300) { = "orange";

Is there any error in his code? If yes, then exactly what is it?

What is the problem in the code below?
// alert "Hi" if ele is set to display: block
if (ele.getComputedStyle().display === "block") {
How can we get the left offset of an element ele from the viewport?

Remember that the option you select shall return the answer directly - no need to further process it.

"I created Codeguage to save you from falling into the same learning conundrums that I fell into."

— Bilal Adnan, Founder of Codeguage