千锋教育JavaScript全套视频教程（10天学会Js，前端javascrip

1.1 获取元素的宽高

1.1.1 元素的（width + padding + border）宽高： 元素.offsetWidth ；元素.offsetHeight；

var oDiv = document.querySelector(“div”);

console.log(oDiv.offsetWidth, oDiv.offsetHeight); //width + padding + border

1.1.2 元素的（width + padding ）宽高：元素.clientWidth ；元素.clientHeight；

console.log(oDiv.clientWidth, oDiv.clientHeight); //width + padding

1.1.3 取元素的宽高（只能取到行内样式，取到的值有单位）：元素.style.width ；元素.style.height；

console.log(oDiv.style.width, oDiv.style.height); //只能取到行内样式 取到的值有单位

1.1.3 取元素的宽高（既能取到行内，也能取到内部和外部引入的样式 ，取到的值有单位 ）：getComputedStyle(元素)[’width’] ; getComputedStyle(元素)[’height’] ;

console.log(getComputedStyle(oDiv)[“width”]); //既能取到行内

console.log(getComputedStyle(oDiv)[“height”]); //也能取到内部和外部引入的样式

1.1.3 某个DOM对象距离定位父级的左边距（offsetLeft）和上边距(offsetTop): 元素.offsetLeft ; 元素. offsetTop ;

//某个DOM对象距离定位父级的左边距（offsetLeft）和上边距(offsetTop)

console.log(oDiv.offsetLeft, oDiv.offsetTop);