标签 元素 节点 对象所有标签的集合
元素属性
client系列
offset系列
scroll系列
案列:
脚本代码:
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
获取浏览器窗口可见区域的宽度
逻辑运算;|| && !
|| 遇到第一个为真,就返回
&& 遇到一个为假就终止返回false 如果没有遇到就返回最后那一个;
&&的优先级比||大