1 结构父级与定位父级
- 结构父级：元素的上一级节点，用parentNode查找，最大的结构元素是html元素；
- 定位父级：元素的上一级添加定位元素的节点，用offsetParent查找，最大的定位元素是body元素；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结构父级与定位父级</title>
<style>
div{
padding: 200px;
border: 20px solid #000;
font-size: 40px;
color: #fff;
}
.divOuter{
background-color: red;
position: relative;
}
.divCenter{
background-color: green;
}
.divInner{
background-color: blue;
position: absolute;
left: 300px;
top: 350px;
}
</style>
</head>
<body class="body">
<div class="divOuter">divOuter
<div class="divCenter">divCenter
<div class="divInner" id="divInner">divInner</div>
</div>
</div>
<script>
var oInner=document.getElementById("divInner");
//1 求出divInner所有的结构父级，用parentNode
var par=oInner.parentNode;
while(par){
alert(par);
par=par.parentNode;
}
/*弹出的结果
* [object HTMLDivElement]，指的是divCenter元素节点
* [object HTMLDivElement]，指的是divOuter元素节点
* [object HTMLBodyElement]，指的是body元素节点
* [object HTMLHtmlElement]，指的是html元素节点
* [object HTMLDocument]，指的是<!DOCTYPE html>，文档节点；
* */
//2 求出divInner所有的定位父级，用offsetParent
var ofpar=oInner.offsetParent;
while(ofpar){
alert(ofpar.className);
ofpar=ofpar.offsetParent;
}
/*弹出的结果
* divOuter
* body
* */
</script>
</body>
</html>
2 封装offset
- 目的：获取指定元素ele到浏览器视口左边缘和上边缘的距离；
- 分析：
- 在IE8/9/10/11浏览器和标准浏览器(Chrome等)中
- 最大的定位元素为body;
- 如果一个元素的定位父级为body；那此时它的offsetLeft/offsetTop指的就是从自己的边框外边缘到浏览器视口的左边缘和上边缘之间的距离；包括了body元素的margin，padding，border；
- 获取指定元素ele到浏览器视口左、上边缘的距离：ele到自己的定位父级的距离-- 此定位父级的左边框+它到body元素的offsetLeft/Top值；
- 在IE7浏览器中
- 最大的定位元素不为body；比body大一级；
- 与IE8/9/10浏览器和标准浏览器不同的是，会多出2px的距离；
- 在IE5浏览器中
- 最大的定位元素为body；
- 与IE8/9/10浏览器和标准浏览器不同的是：如果一个元素的定位父级为body，那它的offsetLeft/offsetTop值不包括body元素的左/上边框宽度；
- 封装兼容的offset方法：
- 判断条件为：
while(par || par!==document.body){}
- IE7浏览器不需要处理，到左上边缘距离就是多2px;
- IE5浏览器中得到的值不包括body元素的边框值，如果body元素不设置边框，则无影响；
<script>
var oInner=document.getElementById("divInner");
//需求：封装方法，求出某元素到body元素的offsetLeft，offsetTop值
//参数 元素，返回值为对象，将值作为属性值
function offset(ele) {
var l=ele.offsetLeft;
var t=ele.offsetTop;
var par=ele.offsetParent;
while(par && par!==document.body){
l+=par.offsetLeft+par.clientLeft;
t+=par.offsetTop+par.clientTop;
par=par.offsetParent;
}
return {left:l,top:t};
}
console.log(offset(oInner).left);
</script>
3 封装win
- 解决问题：每次获取window浏览器（body元素）的可视区域的宽高及卷去长度时，代码太长，封装简化
- 获取时：兼容性设置用||；需要返回值；获取的有四个属性：clientWidth，clientHeight，scrollLeft，scrollTop
- document.documentElement.clientWidth || document.body.clientWidth(IE5,6浏览器)
- document.documentElement.clientHeight || document.body.clientHeight(IE5,6浏览器)
- document.documentElement.scrollLeft || document.body.scrollLeft
- document.documentElement.scrollTop || document.body.scrollTop
- 设置时：用连等；设置不需要返回值；client不能设置；设置的属性只有两个：scrollLeft，scrollTop
- document.documentElement.scrollTop=document.body.scrollTop=xxx;
- document.documentElement.scrollLeft=document.body.scrollLeft=xxx;
- 封装win
//封装utils工具库，自执行函数，返回对象，添加属性名及属性值；
var utils=(function () {
return {
win: function (attr, value) {
//当获取时，需要返回值，不需要传入value实参
//当设置时，不需要返回值，需要传入value实参
//判断是否传入value值
if(typeof value==="undefined"){
return document.documentElement[attr] || document.body[attr];
}
document.documentElement[attr]=document.body[attr]=value;
}
}
})();
4图片跑马灯实例
- 知识点：
- 页面布局的设置，图片设置宽度，li添加浮动，ul设置宽度，div设置宽度，添加定位，让ul的定位left值发生变化，进而达到移动的效果，利用定时器来持续变化
- 肉眼错觉，当ul移动到一半宽度的时候，让其瞬间回到原来位置，即left变为0；
- 利用offsetWidth来的到元素所有尺寸，包含边框，但是需注意，offset获得的值都是数字，没有单位；
- 获取元素身上的属性样式（非行间样式），利用封装的getCss方法，也可以获取行间样式；
- 设置元素身上的属性，利用style设置，如
oDiv.style.width="500px";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片跑马灯</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 800px;
height: 200px;
margin: 100px auto;
border: 10px dashed green;
position: relative;
overflow: hidden;
}
ul{
height: 200px;
position: absolute;
left: 0;
right: 0;
}
ul li{
float: left;
border: 2px solid red;
}
ul li img{
width: 196px;
height: 196px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="image/1.jpg"></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li><img src="image/4.jpg"></li>
</ul>
</div>
<script src="utils.js"></script>
<script>
var oUl=document.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
//把ul里面的内容多复制一份
oUl.innerHTML+=oUl.innerHTML;
//必须重新设置ul的宽度，其中获取li元素的offsetWidth，包含边框的宽度
//注意：offset获取的值都是数值，没有单位；
oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
setInterval(function () {
var Left=utils.getCss(oUl,"left");
Left-=5;
if(Left<=-oUl.offsetWidth/2){
Left=0;
}
oUl.style.left=Left+"px";
},50);
</script>
</body>
</html>
5 瀑布流实例
- 知识点：
- 页面布局的设置，创建几个ul元素，然后宽度设定，高度不设置，由内容撑开，创建li元素时，宽度不设置，设置高度为100-300之间，由于li元素为块状元素，会默认跟父级元素宽度相同，设置背景色为rgb()，里面颜色值为随机数0-255之间；
- 将aUl元素集合（nodelist，htmlCollection）转化为数组，利用sort方法对每个ul元素的高度进行排序，创建li元素插入到高度最小的ul中；
- 给每个创建的li元素中插入对应序号的数字，添加全局变量n，每次创建li后就给其添加内容为++n，依次累加；
- 给window对象添加滚动事件onscroll，判断条件为：浏览器页面的可视区高度加上卷去高度大于等于body元素的scrollHeight(此时用offsetHeight会更好，包含body元素的边框)；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流实例</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1100px;
margin: 20px auto;
overflow: hidden;
font-size: 30px;
}
ul{
width: 200px;
margin: 10px;
float: left;
color: white;
}
</style>
</head>
<body>
<div>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script src="utils.js"></script>
<script>
//封装随机数函数，获取n到m的随机数
var n=0;
function rad(n,m) {
//判断n,m必须全部是数字
if(isNaN(n) || isNaN(m)){
return Math.random();
}
//判断n大于m时，调换位置；
if(n>m){
var temp=n;
n=m;
m=temp;
}
return Math.round(Math.random()*(m-n)+n);
}
function createLi() {
var oLi=document.createElement("li");
oLi.style.height=rad(100,300)+"px";
oLi.style.backgroundColor="rgb("+rad(0,255)+","+rad(0,255)+","+rad(0,255)+")";
return oLi;
}
function li50(){
var aUl=document.getElementsByTagName("ul");
for(var i=0; i<50; i++){
var oli=createLi();
oli.innerHTML=++n;
//类数组转数组，sort排序
var ary=utils.makeArray(aUl);
ary.sort(function (a,b) {
a=utils.getCss(a,"height");
b=utils.getCss(b,"height");
return a-b;
});
ary[0].appendChild(oli);
}
}
li50();
window.onscroll=function () {
if(utils.win("scrollTop")+utils.win("clientHeight")+300>document.body.scrollHeight){
li50();
}
}
</script>
</body>
</html>
6 知识点
- typeof：用于判断A的数据类型
- 代码：
typeof A
- typeof执行后的结果全都是字符串
- 基本数据类型
-
typeof "mei"结果为："string";
-
typeof 12结果为："number";
-
typeof false结果为："boolean";
-
typeof null结果为："object";
-
typeof undefined结果为："undefined";
- 引用数据类型
-
typeof []结果为："object";
-
typeof function add(){}结果为："function";
- 实例：
-
typeof typeof 12结果为："string";
-
typeof typeof []结果为："string";
- 浏览器可视区域宽高与body元素可视区域宽高的知识点
- 标准浏览器(包括IE9,10)
- 浏览器可视区域的宽度：
document.documentElement.clientWidth与window.innerWidth获取值是相等的
- body元素的可视区域宽度：
document.body.clientWidth获取值小于浏览器可视区域的宽度值，等于浏览器可视区域宽度值减去默认的margin(8px)值和padding值。如果页面清除了所有默认的margin和padding值，那么三者值相等；
- 浏览器可视区域的高度：
document.documentElement.clientHeight与window.innerHeight值是相等的；
- body元素的可视区域宽度：
document.body.clientHeight获取值等于body中内容的高度，没有内容则为0；
- IE7,8浏览器
- 不支持
window.innerWidth和window.innerHeight两种获取方法；
- 浏览器的可视区域宽度：
document.documentElement.clientWidth
- body元素的可视区域宽度：
document.body.clientWidth
- 两者宽度获取值相差20px,因为有默认的margin为10px;
- 浏览器可视区域的高度：
document.documentElement.clientHeight；
- body元素的可视区域宽度：
document.body.clientHeight获取值等于body中内容的高度，没有内容则为0；
- IE5,6浏览器
- 浏览器可视区域宽高：
document.documentElement.clientWidth/Height获取到的是0，而document.body.clientWidth/Height获取到的是可视区域的宽高；
- 不同浏览器下获取浏览器可视区域的宽高的兼容代码
- 浏览器可视区域的宽度：
window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth，指在标准浏览器下会直接使用第一段代码，在IE7-8浏览器下，不支持第一段代码，为undefined，假，执行第二段代码，在IE5-6浏览器下，不支持前两段代码，执行第三段代码；
- 浏览器可视区域的高度：
window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,使用情景与宽度相同；
- 若浏览器存在滚动条，window.innerWidth获取的宽度包含滚动条的默认17px,而document.documentElement.clientWidth获取的宽度不包含滚动条的宽度；这是二者的区别；
网友评论