javascript(20)查看、修改样式

1.读取改变内联样式
    读取内联样式:
对象.style.属性名
    更改内联样式
对象.style.属性名=属性值
注意：
    属性值用字符串形式表示
    如果是属性名中间有-符号的,那么需要使用驼峰命名法来转换属性名
     比如说background-color ->backgroundColor
改变前：

查询的内联样式：

window.onload=function(){
				var alter=document.getElementById("alter");
				var get=document.getElementById("get");
				var box1=document.getElementById("box1");
				//只能读取内联样式，不能读取样式表中的样式
				get.onclick=function(){
					console.log("box的背景色："+box1.style.backgroundColor);
					console.log("box的宽："+box1.style.width);
					console.log("box的高："+box1.style.height);
				};
				/*改变元素的属性:对象.style.属性名=属性值+'';
				*/
				alter.onclick=function(){
					box1.style.width="200px";
					box1.style.backgroundColor="aquamarine";
				};

改变后：

查询的内联样式：

2.1 IE查看当前样式的方法
currentStyle:IE能使用其他浏览器不能使用,查看当前显示的元素
用法：对象.currentStyle.属性名
getComputedStyle():IE8以及以下浏览器不可使用，其他浏览器使用
用法：参数1：获取对象的目标
参数2：一个伪元素，一般填null
返回值：一个封装了所有目标对象的对象

				//获取当前样式
				
				/* 
				 * */
				var currentStyle=document.getElementById("currentSytle");
				currentStyle.onclick=function(){
					console.log("box1.currentStyle.width:"+box1.currentStyle.width);
					console.log("box1.currentStyle.height:"+box1.currentStyle.height);
					console.log("box1.currentStyle.backgroundColor:"+box1.currentStyle.backgroundColor);

				};

IE获取到的样式：

2.2 其他浏览器查看元素当前样式
方法：getComputedStyle()
参数1 要查看元素的元素对象
参数2 传入一个伪元素，一般填null
返回值：该方法会返回一个封装着当前对象所有方法的对象
可以通过 对象.属性名来调用

				//获取对象当前样式的所有属性
				var getComupted=document.getElementById("getComputed");
				getComupted.onclick=function(){
					var sy=getComputedStyle(box1,null);
					
					console.log("sy.width:"+sy.width);
					console.log("sy.height:"+sy.height);
					console.log("sy.backgroundColor:"+sy.backgroundColor);
				};
				

其他浏览器获取到的样式：

3.整合2中查看元素的方式，统一IE和其他浏览器的查看方式

				//函数，用来兼容查看元素样式的两种方式
					/*参数1:要查看样式的对象
					参数2:要查看样式的属性名*/
				function getStyle(obj,name){
					//判断window是否有这个方法，如果有则调用，
					//没有就返回undefined==null
					if(window.getComputedStyle){
						//不能使用.属性名，这种调用方式，只会调用到对象本身的属性和对象
						//需要使用[属性名]
						return getComputedStyle(obj,null)[name];
					}else{
						obj.currentStyle[name];
					}
					//同理.利用三目运算符也可以
					return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
				}
			};

		//body中的代码
		<div id="box1" style="width:200px; background-color:gold ;"></div>
		<button id="alter">alter</button>
		<button id="get">get</button>
		<br />
		<button id="currentSytle">currentSytle</button>
		<button id="getComputed">getComputed</button>
		//style中代码
					
			#box1{
				width:100px;
				height:100px;
				background-color: gray;
			}

3.1获取当前元素的高宽
clientHeight,clientWidth
特点:查看元素的内容区+内边距

window.onload=function(){
				var bBox=document.getElementById("bigBox");
				var sBox=document.getElementById("smallBox");
				//clientHeight,clientWidth查看当前元素的长宽
				//显示的是包括内容区和内边距
				console.log("sBox.clientHeight 长："+sBox.clientHeight+"sBox.clientWidth 宽："+sBox.clientWidth);
				//offsetHeight,Width显示包括内容区，内边距和边界的box的属性

3.2 查看元素的长宽，top，left
offsetHeight
offsetWidth
offsetTop
offsetLeft
特点：查看元素的内容区+内边距+边界

				console.log("sBox.offsetHeight:"+sBox.offsetHeight+" sBox.offsetWidth:"+sBox.offsetWidth)
				//offsetTop,offsetLeft距离边界的位置。使用的前提是开启定位
				console.log("sBox.offsetTop:"+sBox.offsetTop+" sBox.offsetLeft:"+sBox.offsetLeft);
				console.log("bBox.offsetTop:"+bBox.offsetTop+" bBox.offsetLeft:"+bBox.offsetLeft);

4.查看元素的最近的定位父元素
offsetParent，元素的最近的定位父元素（开启了定位的父元素） 如果没有的话，就是body

				console.log("sBox.offsetParent.id:"+sBox.offsetParent.id);

5.其他方法
scrollWidth
查看元素整个滚动区域的宽
scrollHeight
查看元素整个滚动区域的高
scrollLeft
获取水平滚动条滚动的距离
scrollTop
获取垂直滚动条滚动的距离