javascript DOM元素宽高

Posted 2020-09-26

获取元素位置

• offsetLeft　　元素相对于父元素的左边距离
• offsetHeight　　元素相对于父元素上部的距离

 

offsetLeft和style.left的区别

• offsetLeft是只读的；style.left是可读写的，要改变元素的位置，只能使用style.left
• offset返回的是一个Number；style.left返回的是字符串，如“30px”
• style.left需要在html中直接定义。在CSS样式表中定义，是无法获取这个属性的

 

这里引出一点：

如果要获取元素属性的话，这个属性必须在元素中声明。写在CSS样式表和<style>中都是无法被脚本获取的。

而且，element.width和element.style.width是两个属性。虽然显示出来效果相同，但是element.width是Number，element.style.width是String

 

 

获取元素宽高

• element.offsetWidth
• element.offsetHeight

 

offset属性获取到元素的宽高包括padding，不包括margin

element.style.width只能修改属性的值，不能用来获取值

 

 

获取浏览器窗口宽高

• window.innerWidth
• window.innerHeight

 

• window.outerWidth
• window.outerHeight

 

 

滚动属性

• scrollTop
• scrollLeft

返回元素完整的宽高。

 

• scrollWidth
• scrollHeight