offset系列
offsetWidth: 获取元素的宽(包括左右padding和border)。
offsetHeight: 获取元素的高(包括上下padding和border)。
offsetTop: 获取元素距离上面位置的值。
offsetLeft: 获取元素距离左边位置的值。
offsetParent: 获取距离自己最近的有定位的父元素。
注意:
在style标签中设置的元素的样式属性是无法直接通过:对象.style.属性 来获取的,在style属性中设置的可以通过 对象.style.属性 获取。就是说:
在style标签中设置的样式属性,用style.width、style.height这样的方式是获取不到的。
在style属性中设置的样式属性,用style.width、style.height这样的方式可以获取到。
因此,获取元素的宽高这样的属性,无论是在style标签中设置的,还是在style属性中设置的,都可以用offset系列来获取。
offsetLeft:
获取元素距离左边位置的值。
元素没有脱离标准流:
父级元素的margin+父级元素的padding+父级元素的border+自己的margin
脱离文档流:
主要是自己的left值和自己的margin
offsetWidth与style.width的区别
style.width:
1.只能获取行内的样式2.获取到的是字符串格式
3.可以设置宽度,记得带单位
offsetWidth:
1.获取自身的宽度(padding,border也会获取)2.获取到的是数值类型,可以直接进行计算
3.offsetwidth是只读属性,只能获取不能设置
offsetLeft与style.left的区别
style.left:
1.只能获取行内的样式2.获取到的是字符串格式
3.可以设置距离,记得带单位
offsetLeft:
1.获取与offsetParent的真实距离(margin也会获取)2.获取到的是数值类型,可以直接进行计算
3.是只读属性,只能获取不能设置
offsetParent与parentnode的区别
parentnode:
找自己最近的父元素
用法:document.getElementById("item1").parentNode;
parentNode 属性可返回某节点的父节点。
如果指定的节点没有父节点则返回 null 。