dom编程

元素的宽高

clientWidth：内容+padding（工具条宽） clientHeight

offsetWidth：内容+padding+边框 offsetHeight

scrdlwidth：没有滚动条同clienWidth内容+padding-工具条+滚动距离     scrdlHeight

<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
		<p class="myp">我是一个段落</p>
<script type="text/javascript">
		// 目标：获取p标签的高度
		var myp=document.querySelector(".myp");
		console.log("content＋padding",myp.clientHeight);
		console.log("content＋padding＋boder",myp.dffsetHeight);
		console.log("content＋padding＋boder",myp.dffsetHeight);
		
	</script>

---

如何回到顶部

     给window添加滚动事件,如果滚动的高度大于header高度,让.nav position属性改变fixed 否则改变static
     

<div class="header">header</div>
				<div class="nav">nav</div>
				<div class="top">top</div>
					
				</div>
				<p class="myp">我是一个段落</p>
<p>我是p1</p>
<script>
				
					var nav = document.querySelector(".nav");//获取nav
					var header = document.querySelector(".header");//获取到header节点
					// 给window添加滚动事件,如果滚动的高度大于header高度,让.nav position属性改变fixed 否则改变static
					// 添加窗口滚动事件
					window.addEventListener("scroll",function(){
						// 如果滚动距离大于header的高
						if(document.documentElement.scrollTop>header.offsetHeight){
							// 让body添加fix
							document.body