首页 > 代码库 > javascript DOM元素宽高

javascript DOM元素宽高

获取元素位置

  • 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

 

javascript DOM元素宽高