（JavaScript）前端JS不知道怎么理解网页？本专栏从0开始教学！（十三）：通过JS获取标签的基本样式、内联样式；通过JS修改元素样式；本文罗列了大部分有关DOM元素的属性和方法！

<style>
div{
/*		width:200px;*/
	height: 200px;
	margin: 100px auto 20px;
	background: #F0A1A2;
}	
div:before{
	
}
div:after{
	
}
button{
	display: block;
	width:100px;
	padding: 10px 40px;
	margin: 10px auto;
	border:none;	
	border-radius: 5px;
	background:#3F78D0;
	color: #fff;
}
</style>

<div id="box"></div>
<button id="btnInlineStyle">获取元素内联样式</button>
<button id="btnDisplayStyle">获取元素显示样式</button>

var box=document.getElementById("box");
//获取元素内联样式的按钮
var btnInlineStyle=document.getElementById("btnInlineStyle");
//获取元素显示样式的按钮
var btnDisplayStyle=document.getElementById("btnDisplayStyle");
btnInlineStyle.onclick=function(){
	box.style.width="300px";
    console.log("-------------------------我是知识点分割线 · 当前知识点是：DOM节点的操作---------------------")
	console.log(box.style.width);
	console.log(box.style.height);
}

btnDisplayStyle.onclick=function(){
//		var s=box.currentStyle.height;
//		console.log(s);
//		console.log(box.currentStyle.backgroundColor);
//		console.log(box.currentStyle["backgroundColor"]);
//		console.log(box.currentStyle.width);
//		var obj=getComputedStyle(box,null);
//		console.log(obj.width);
//		console.log(obj.height);
//		console.log(obj.backgroundColor);
//		console.log(obj["backgroundColor"]);
	console.log(getStyle(box,"width"));
	console.log(getStyle(box,"backgroundColor"));
	
}

function getStyle(element,name){
//		//大部分浏览器中
//		return getComputedStyle(box,null).width;
//		//IE中获取元素
//		return element.currentStyle.width
	if(window.getComputedStyle){
		return getComputedStyle(element,null)[name];
	}else{
		return element.currentStyle[name];
	}
}

<style>
button{
	display: block;
	width:100px;
	padding: 10px 40px;
	margin: 10px;
	border:none;	
	border-radius: 5px;
	background:#3F78D0;
	color: #fff;
}
.box{
	width: 200px;
	height: 200px;
	padding: 10px;
	border:10px solid #A85ED5;
	background: #F5BEBF;
	position: absolute;
	top: 20px;
	left: 20px;
}
.container{
	width:300px;
	height: 300px;
	border:1px solid #2F669E;
	position: relative;
}
#wrap{
	width:300px;
	height: 300px;
	background: #DC999A;
	overflow: auto;
}
#wrap>div{
	width:600px;
	height: 600px;
	background: #86D6B9;
}
</style>

<button id="btn1">按钮一</button>
<div style="position: relative;">
	<div class="container">
		<div class="box" id="box"></div>
	</div>
</div>
<button id="btn2">按钮二</button>
<div id="wrap">
	<div></div>
</div>

<div style="height: 200px;"></div>

var btn1=document.getElementById("btn1");
varbox=document.getElementById("box");
btn1.onclick=function(){
	/*
		element.clientHeight
		element.clientWidth
			- 这两个属性可以获取元素的可见宽度和高度
			- 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
			- 会获取元素宽度和高度，包括内容区和内边距
			- 这些属性都是只读的，不能修改
	*/
	console.log("box.clientHeight="+box.clientHeight);
	console.log("box.clientWidth="+box.clientWidth);
	/*
		element.offsetHeight
		element.offsetWidth
			- 获取元素的整个的宽度和高度，包括内容区、内边距和边框
	*/
	console.log("box.offsetHeight="+box.offsetHeight);
	console.log("box.offsetWidth="+box.offsetWidth);
	
	/*
		element.offsetParent
			- 可以获取当前元素的定位父元素
			- 会获取到距离当前元素最近的设置定位的祖先元素
				如果所有的祖先元素都没有设置定位，则返回body
	*/
	var ele=box.offsetParent;
	console.log(ele);
	/*
		element.offsetLeft
			- 当前元素相对应其定位元素的水平偏移量
		element.offsetTop
			- 当前元素相对应其定位元素的垂直偏移量
	*/
	console.log("box.offsetLeft="+box.offsetLeft);
	console.log("box.offsetTop="+box.offsetTop);
};
var btn2=document.getElementById("btn2");
var wrap=document.getElementById("wrap");
btn2.onclick=function(){
	/*
		element.scrollWidth 
		element.scrollHeight 
			- 可以获取元素整个滚动区域的宽度和高度
	*/
	console.log("wrap.scrollWidth="+wrap.scrollWidth);
	console.log("wrap.scrollHeight="+wrap.scrollHeight);
	
	/*
		element.scrollLeft 
			- 可以获取水平滚动条滚动的距离
		element.scrollTop 
			- 可以获取垂直滚动条滚动的距离
	*/
	console.log("wrap.scrollLeft="+wrap.scrollLeft);
	console.log("wrap.scrollTop="+Math.round(wrap.scrollTop));
	
	console.log("wrap.clientHeight="+wrap.clientHeight);
	console.log("wrap.clientWidth="+wrap.clientWidth);
	//当满足scrollHeight==clientHeight+scrollTop
	//说明垂直滚动条滚动到底了
	//当满足scrollWidth==clientWidth+scrollLeft
	//说明水平滚动条滚动到底了
}