How to design a html file from a xd file as reference-CodePudding

Is there any way to know parameters like height, width of various parts etc? So that the webpage that I will be making will look just like the xd file

CodePudding user response：

Use .getBoundingClientRect() to get the width, height and a location of object.

CodePudding user response：

For width and height, you can use clientWidth and clientHeight. According to MDN, element.width and element.height are deprecated.

let square = document.getElementById("square")
console.log(square.clientWidth);
console.log(square.clientHeight);

#square{
  width:200px;
  height:100px;
  background-color:orange;
}

<div id="square"></div>