DOM编程2_html-js-css

一：获取元素的css

二：元素的高与宽

三：元素与父元素距离

四：元素的滚动距离

五：事件的绑定与解绑

1.绑定

2.解绑

3.事件对象

4.事件传递

5.键盘事件

6.鼠标事件

7.表单事件

8.页面事件

9.事件代理

一：获取元素的css 元素.style.属性只能获取行内样式getComputedStyle (元素).属性名（IE不兼容）getComputedStyle是window下一个方法；把对应的元素传给这个方法他是window上的一个属性获取浏览器计算的样式如果是复合属性名，把-去掉，换成驼峰命名；`console.log(getComputedStyle(元素).属性名)```console.log(getComputedStyle(box).width)```console.log(getComputedStyle(box)[‘width’])``currentStyle（只有IE兼容）元素.currentStyle.属性名IE8及以下，用这个方法获取元素css中设置的样式；他是元素身上的属性



	
		
		
		
	
	
		我是一个段落

 
 二：元素的高与宽 
 clientWidth:内容+padding+border（减去工具条)offsetWidth:内容+padding+borderscrollWidth没有滚动条同offsetWidth  内容+padding-工具条+滚动的距离clientHeight；offsetHeight；scrollHeight


	
		
		
		
	
	
		我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落
我是一个段落

		
	
 
 三：元素与父元素距离 
offsetLeft与相对父元素的左偏移值offsetTop与相对父元素的垂直偏移值offsetParent相对父元素
 元素的父辈元素有position非static值


	
		
		
		
	
	
		
			
				son
			
		
		
	
 
 四：元素的滚动距离 
elem.scrollTopelem.scrollLeft浏览器滚动距离
 document.documentElement.scrollTop
 document.body.scrollTop
  



	
	
	
	
	


	
		
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
			
		
	


 
 
五： 事件的绑定与解绑 
1.绑定 
btn.οnclick=function（）{} 
btn.addEventListener(type,funName) 
2.解绑 
btn.οnclick=null 
btn.removeEventListener(type,funName) 
匿名函数不能解绑 


	
		
		
	
	
		事件的绑定与解绑
		
		
		
		
	
 
 
3.事件对象 
 
event.offsetX
 event.offsetY
 相对于事件源偏移文字event.target 源对象event.pageX
 event.pageY
 相对于页面的位置
 4.事件传递 
6冒泡：最具体元素最先捕捉到事件，传递给最不具体的元素（document）捕获：最不具体的元素先捕获到事件，传递给最具体的元素默认都是冒泡，使用捕获
 elem.addEventListener(事件类型，响应时间，是否为捕获）
 elem.addEventListener（"click,doit,true)阻止事件传递
 event.stopPropagation()阻止默认事件
 event.preventDefault()


	
		
		
		
	
	
		
			
				
					son
					百度
				
			1qaq	
		
		
		
		
	
 
 5.键盘事件 
keypress 
keyup 
keydown 
event.keyCode键对应数字编码
 event.key键盘的名称
 event.which等于keyCode 
键盘事件参数： 
event.key;event.keyCode 
键盘名:Enter,ArrowUp... 
键盘代码:13就是enter键盘 
6.鼠标事件 
mouseover鼠标移入
 mouseout鼠标移出
 mousedown鼠标按下
 mouseup鼠标d起
 mousemove鼠标移动
 click单击
 dblclick双击 
鼠标事件对象参数： 
event.offsetLeft;event.offsetTop; 
相对于事件源对象水平距离;垂直距离; 
event.pageX;event.pageY(clientX,clientY) 
相对于页面的水平距离与垂直距离 
7.表单事件 
change值发生变化input正在输入focus获取焦点blur失去焦点
8.页面事件  
load加载
 resize窗口变化
 scroll滚动 
9.事件代理 
把事件注册到其共有的父元素上，通过事件的冒泡机制，event.target实现目标
 （本来注册给每个元素，注册到其共有的父元素） 


	
		
		
		
	
	
		留言板
		
			我是第一条默认留言
			我是第二条留言
		
		
		
	
 
 
					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1320143.html

DOM编程2

发表评论

评论列表（0条）