前端攻城狮---js之dom对象(2)

本章节主要讲计算后样式和测量的相关知识点。

我们可以通过dom提供的可靠的api，去获取样式计算后最终的值。

计算后样式

获取计算后的样式的方法有以下几种

window.getComputedStyle("对象").getPropertyValue("属性");//window可以忽略
getComputedStyle("对象")["属性"];
对象.currentStyle.属性;/对象.currentStyle[属性]

我们来分析一下三者的使用区别

-----getComputedStyle("对象").getPropertyValue("属性")

该方法无法兼容到IE6 7 8 ,后面的属性同css样式一样的写法

-----getComputedStyle("对象")["属性"];

该方法同样也无法兼容到IE6 7 8，后面的属性可以用css名字，也可以用到驼峰式。驼峰式如background-color要写成backgroundColor

------对象.currentStyle.属性/对象.currentStyle[属性]
对象.currentStyle.属性/对象.currentStyle[属性]

该方法用于IE6 7 8，后面的属性也需要驼峰式。

-----------------------------------------------------------------

那么有人会问，如果去兼容到IE6 7 8要怎么做？这时候我们就需要进行能力检测。

能力检测

if(window.getComputedStyle){

大于IE8的获取计算后样式的方法

}else{

小于IE6 7 8 获取计算后样式的方法

}

以上就是获取计算后样式兼容性问题的解决方案，if里面的条件就是能力检测，去检测当前浏览器是否有getComputedStyle方法，没有也就是意味着IE版本小于等于8，则使用小于IE6 7 8的方法。下面我们来写一个封装一个能力检测获取计算后样式的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
     div {
         padding: 10px 20px 30px 40px;
     }
  </style>
</head>
<body>
  <div></div>
  <script type="text/javascript">
      var div = document.getElementsByTagName("div")[0];
      /**
      obj元素，property属性：可能是css样式的，可能是驼峰式的需要做处理
      **/
      function isComputedStyle(obj,property){
          if (window.getComputedStyle) {//能力检测
             return getComputedStyle(obj)[property];//因为css样式或者是驼峰式都可以
          }else{
            if (property.indexOf("-")) {//非驼峰式需要转成驼峰式
              property = property.replace(/\-([a-z])/g,function(match,$1){
                 return $1.toUpperCase();
              })
            }
            return obj.currentStyle[property];
          }
      }
      console.log(isComputedStyle(div,"padding-left"));
  </script>
</body>
</html>

透明度

透明度在css样式中有两种设置方法,和js中设置的方法

opacity:0.5; ---->元素.style.opacity = 0.5;

fliter:alpha(opacity=50); ---->元素.style.fliter = "alpha(opactity="+50+");";

所以在通过计算后样式的时候，可能会有顾虑，其实高版本就要高版本的获取方式去获取opacity，低版本就用低版本的获取方法去获取opacity就可以算兼容，前提是opacity的值于fliter的值相等即可

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 300px;
	   	  height: 300px;
	   	  background: #000;
	   	  opacity: 0.2;
	   	  filter: alpha(opacity=20); /*为了兼容IE*/
	   }
	</style>
</head>
<body>
	<div>
	</div>
    <script type="text/javascript">
       // 获取div的透明度
       var oDiv = document.getElementsByTagName("div")[0];
       alert(getComputedStyle(oDiv)["opacity"]); //0.2  高版本浏览器
       // alert(oDiv.currentStyle.opacity); // IE6 7 8   .2
    </script>
</body>
</html>

就可以做到兼容。

offsetLeft/offsetTop

因为offsetTop同offsetLeft一样，故在此我们就讲解offsetLeft

offsetLeft表示这个元素的左边距的外面到offsetParent的左边距的内侧的距离。

什么是offsetParent？offsetParent表示参照物，那么offsetParent参照的依据是什么呢？这里就是要为不同的浏览器的版本进行分析。

IE9以及chrome等高级浏览器

自己祖先元素中，离自己最近的且设置了定位的元素，若都没有则以body为offsetparent。

IE8

同高级浏览器一样，但是需要多算上一条border的宽度（父亲的边框）

IE6 7

第一种情况，自己有定位的，则offsetParent就是离自己最近的且有定位的元素

第二种情况，自己没有定位的，则offsetParent就是离自己最近的且有width/height的元素

想要去兼容这三种情况要怎么去做？

自己定位，父无边宽，且父设置了定位。

offsetWidth/offsetHeight

表示自己当前元素的宽高。（都兼容）

offsetWidth = 左右border+width+左右padding

offsetHeight = 上下border+height+上下padding

假如没有设置宽度和高度，则width和height有内容撑开。

clientWidth/clientHeight

也是表示自己当前元素的宽高。(都兼容 IE6有点小问题)

clientWidth = width+左右padding

clientHeight = height+上下padding

IE6 假如没有设置宽高的话，clientHeight的高度为0，其他浏览器都是正常的

定时器

1.setInterval（function(){},time）

2.setTimeout（function(){},time）

setInterval

表示每个一段时间去调用方法。对应的清除方法是如下

	  var timer =  setInterval(function() {
	   }, 50);
	  clearInterval(timer)

setTimeout

表示延迟多少时间去调用方法，方法只调用一次。

 var timer =  setTimeout(function(){
	   	console.log("setTimeout");
	   }, 1000);
	  clearTimeout(timer)

那么我们就可以通过定时器，去给修改元素的值，从而变了动画。下面我们来看看demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	   div {
	   	  width: 100px;
	   	  height: 100px;
	   	  background-color: pink;
	   	  position: absolute;
	   	  left: 60px;
	   	  top: 40px;
	   }
	</style>
</head>
<body>
	<div class="box" id="box"></div>
	<script type="text/javascript">
	   // 页面一打开，div运动到702px自动停止 
	   var box = document.getElementById("box");
	   var num = 60; 
	   var timer = setInterval(function() {
             num+=8;  
             if(num>=702) {
             	// 拉终停表
             	num = 702;
             	clearInterval(timer);
             }
             box.style.left = num + "px";
	   }, 30);
	</script>
</body>
</html>

以上demo就是用过定时器去不断的改变left，当left到了的值大于702的时候，就要去解绑定时器。

可以通过定时器去写一个自动无缝的轮播图，还有点击暂停再点击播放的功能。效果图如下。

有几个注意点，从最后一张到第一张图片的过渡，每一张图片的无缝。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.banner{
			width: 600px;
			height: 130px;
			overflow:hidden;
			border: 1px solid black;
			margin: 0 auto;
			position: relative;
		}
		.banner .content {
			width: 5400px;
			height: 130px;
			position: absolute;
		}
		ul{
			list-style: none;
		}
		.banner .content li{
			float: left;
		}
		.banner .content li img{
			width: 600px;
			height: 130px;
		}
	</style>
</head>
<body>
	<div class="banner" id="banner">
		<div class="content" id="content">
			<ul>
				<li><a href=""><img src="img/0.png"></a></li>
				<li><a href=""><img src="img/1.png"></a></li>
				<li><a href=""><img src="img/2.png"></a></li>
				<li><a href=""><img src="img/3.png"></a></li>
				<li><a href=""><img src="img/4.png"></a></li>
				<li><a href=""><img src="img/5.png"></a></li>
				<li><a href=""><img src="img/6.png"></a></li>
				<li><a href=""><img src="img/7.png"></a></li>
				<li><a href=""><img src="img/0.png"></a></li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
		var banner = document.getElementById("banner");
		var content = document.getElementById("content");
		var img_list = content.getElementsByTagName("li");
		var move_num = 0;
		var timer;
		move();
		for(var i = 0;i<img_list.length;i++){
			img_list[i].onclick=function(){
				if (timer!=undefined) {
					clearInterval(timer);
					timer = undefined;
				}else{
					move();
				}
			}
		}
		function move (){
			timer = setInterval(function(){
				move_num -=5;
				if (move_num<=-600*(img_list.length-1)) {
					move_num = 0;
					// clearInterval(timer);
				}
				content.style.left = move_num+"px";
			},10);
		}


	</script>
</body>
</html>

Json

与后台的大部分数据交互都是json格式。

var person = {
"name":"heihei",
"age":18,
"sex":"m",
"wife": {
"name": "Angelababy",
"age":16,
"shengao":168
}
};

其中name就是key，heihei就是value，key必须是字符串带着双引号的。

如何去获取key对应的value？如获取name对应的值

person.name / person["name"]这两种方式都可以去获取。

如何去给person添加新的值呢？

person.hobby=["haha","heihei"];直接添加即可

如何去删除某个属性

delete person.age

如何循环的获取person的k，value？

for(var k in person) {
alert(k);// 代表某个属性
alert(person[k]); // 属性值
}

同样json对象还能存放方法

person.myfun=function(){ console.log("hahaha")};直接添加即可

js的dom对象的基本知识已讲完，接下来会来讲自己封装一个动画运动框架，如有表达错的请谅解，并请提出指出，且修改错误，望能共同进步。