元素的属性

标签　　元素　　节点　　对象所有标签的集合

　　元素属性

　     client系列                                 

　　 offset系列

　　 scroll系列

　　案列：

　　<div id="divs" class="aa bb cc">

　　　　

　　</div>

　　脚本代码：

　　var div=document.getElementById("divs")；

　　console.log(div)

　　div.attribute    是所有标签属性构成的集合

　　div.class.list是是所有class名构成的数组集合

　　在classList的原型链上可以看到                    （__proto__原型链）

　　add()   可以单独添加样式名

　　remove（）      可以删除样式名；

　　写法：

　　div.classList.add("dd");

　　div.classList.remove("aa");

　　div.className="hehe"     (将对class重命名)；

　　client系列

　　clientWidth/clientHeight 是我们设置的宽和高加上内边距（没有边框）

　　clientLeft/clientTop    是我们设置的边框值

　　offset系列

　　offsetHeight/offsetWidth  是我们设置的宽和高加上内边距和外边距

　　offsetLeft/offsetTop  是元素外边距离父级的内边距的距离（特殊）可以做案列

　　他的父级是由定位决定的      ie7为0   标准浏览器值为8

　　offsetparent属性（  返回这个元素的父级）

　　scroll系列；     （overflow：auto     当内容超出后，就会有滚动条）

　　scrollHeight/scrollWidth               是我们设置宽和高加内边距（内容没有溢出的情况下，如果溢出（超出范围）按内容来定）；

　　scrollTop/scrollLeft              滚动条卷走的宽度和高度

　　offsetTop/offsetLeft的参照物是父级身上的position：absolute/fixed   这个属性决定的，如果父级没有就逐层向上查找直到body为止，

　　position：relative；是相对于自己；

　　position：absolute/fixed 是相对于父级做运动，如果我们设置小数，都会向上取整；

　　运动的三要素：时间　　速度　　距离

　　案例：

　　offset 往往和我们做的运动有关

　　offset 必须和position配合使用，往往这个值必须是absolute

　　offsetLeft/offsetTop有初始值，在标准浏览器下是8px，低版本为0

　　console.log(document.body.offsetWidth)

　　document.body 获取是文档中body标签

　　document.document.Element 获取文档中的根节点

　　document.body.clientWidth   1077    （浏览器自带8px的外边距）（如果想让他们边距一样，在css中去边距）*{margin：0 ；padding：0；}

　　document.document.Element.clientWidth   1098     

　　兼容性：ie6及以下不支持document.document.Element的写法；

　　兼容的写法：

　　var s=document.documentElement.clientWidth||document.body.clientWidth

　　获取浏览器窗口可见区域的高度：

　　　　document.body.clientHeight||document.documentElement.clientHeight

　　获取body整个文档的高度：

　　　　document.body.scrollHeight||document.documentElement.scrollHeight