JavaScript offset实现鼠标坐标获取和窗口内模块拖动

offset

offset 即偏移量，使用 offset 系列相关属性可以 动态的 获取该元素的位置（偏移）、大小等，如：
元素距离带有定位父元素的位置
获取元素自身的大小（宽度高度）
注：返回的数值不带单位

offset 系列常用的属性包括：
    element.offsetParent
    返回作为该元素带有定位的父级元素，如果父级元素没有定位，则返回 body
    注意，parentNode 和 offsetParent 还是有本质上的区别的：parentNode 返回的是直接父级元素，offsetParent 返回的是带有定位的父级元素。
    element.offsetTop
    返回元素带有定位父元素上方的偏移
    element.offsetLeft
    返回元素带有定位父元素左边框的偏移
    element.offsetWidth
    返回自身包括 padding, 边框, 内容区的宽度，返回数值不带单位
    element.offsetHeight
    返回自身包括 padding, 边框, 内容区的高度，返回数值不带单位

offset 和 style 的区别

offset	style
offset 可以得到任意样式表中的样式值	style 只能得到行内样式表中的样式值，无法获得内嵌样式
offset 系列获得的数值是没有单位的	style.width 获得的是带有单位的字符串
offsetWidth 包含 padding+border+width	style.width 获得不包含 padding 和 border 的值
offsetWidth 等属性是只读属性，只能获取不能赋值	style 属性是可读写属性，style.width 可以获取也可以赋值
只想要获取元素大小位置的时候，用 offset 更合适	要对元素样式进行修改的话，使用 style 更合适

案例一：实时展示鼠标的坐标

演示

	
		
		
		
		
		
	
	
		
获取鼠标在盒子内坐标
		

		
	

案例二：拖动模块

演示

  
    
    
    
    
    
  
  
    

      
点击弹出模拟框
    
    

      
关闭
      
点击我拖动吧
    
    

    
  

到此这篇关于JavaScript offset实现鼠标坐标获取和窗口内模块拖动的文章就介绍到这了,更多相关JavaScript鼠标坐标获取和窗口内模块拖动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！