html offset属性,HTML5+CSS3从入门到精通 offset大家族

本篇教程探讨了HTML5+CSS3从入门到精通 offset大家族，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

html>

offset大家族

body,html{

margin:0;

padding:0;

}

.grandpa{

margin-left:50px;

width:500px;

height:300px;

background:#ff9933;

position:relative;

border:5px solid #33ff00;

}

.father{

width:300px;

height:300px;

background:#ff3366;

padding:20px;

border:5px solid #ffff00;

}

.son{

width:100px;

height:100px;

background:#0000ff;

padding:10px;

border:5px solid #ccffcc;

}

var father=document.querySelector(".father");

var grandpa=document.querySelector(".grandpa");

var son=document.querySelector(".son");

console.log(son.offsetWidth);//130

console.log(son.offsetHeight);//130

console.log(son.offsetLeft);//25

console.log(son.offsetTop);//25

console.log(son.offsetParent.className);//grandpa

console.log(son.parentNode);//

console.log(son.style.left);//300px  这里虽然获得300px 但是由于没有设置position属性所以不起作用

console.log(father.style.left);//300px

son.offsetLeft="300";

console.log(son.offsetLeft);//20

son.style.left="500px";

console.log(son.style.left);

/*

offsetWidth    元素本身的宽度  content+padding+border  动态

offsetHeight   元素本身的高度  content+padding+border  动态

offsetLeft        此元素左外边框到有定位的长辈的边框距离  就近长辈

offsetTop        此元素右外边框到有定位的长辈的边框距离  就近长辈

js没有right 和 bottom

所以 right=son.offsetLeft+son.offsetWidth

top=son.offsetTop+son.offsetHeight

1. son.style.left   访问的话只能得到行内的style值

这样的div class="son" style="position:absolute;top:300px">