网页常见特效一

发表于 | 分类于

网页常见特效

offset属性

html

1
<div class="demo" id="demo">adfd</div>

css

1
2
3
4
5
6
7
8
9
10
11
12
*{
    padding: 0;
    margin: 0;
}
#demo {
    width: 200px;
    height: 200px;
    border: 2px solid red;
    background-color: #008aff;
    padding: 20px;
    margin: 30px;
}

script

1
2
3
4
5
6
7
var demo = document.getElementById("demo");
console.log(demo.offsetHeight);  //244   //返回任何一个元素的高度包括边框和填充，但不是边距
console.log(demo.offsetWidth);  //244  //返回元素的宽度，包括边框和填充，但不是边距
console.log(demo.offsetLeft);   //30  //距离左边的距离，返回当前元素的相对水平偏移位置的偏移容器
console.log(demo.offsetTop);    //30  //距离顶部的距离 ，返回当前元素的相对垂直偏移位置的偏移容器
console.log(demo.offsetParent); //返回body,	返回元素的偏移容器

offsetWidth 与 style.width的区别

html

1
<div id="demo" style="width: 300px;"></div>

css

1
2
3
#demo {
    width: 200px;
}

script

1
2
3
4
5
6
7
8
var demo = document.getElementById("demo");
console.log(demo.style.width);    //得到带单位的值
console.log(demo.offsetWidth);   //只能得到数字
demo.style.width = "500px";  // 可以得到 行内的值，也可以更改值
demo.offsetWidth = 500;  // 可以得到值，但是不能更改值
console.log(demo.style.width);
console.log(demo.offsetWidth);

offset client scroll

html

1
<div id="div">1111</div>

css

1
2
3
4
5
6
7
8
9
10
11
*{
    padding: 0;
    margin: 0;
}
#div{
    width: 2000px;
    height: 2000px;
    background-color: red;
    border: 5px solid #000000;
    padding: 100px;
}

script
元素的高度包括边框和填充，但不是边距

1
2
3
4
console.log(div.offsetHeight);
console.log(div.offsetWidth);
console.log(document.body.offsetHeight);
console.log(document.body.offsetWidth);

在页面上返回内容的可视高度（不包括边框，边距或滚动条）

1
2
3
4
console.log(div.clientHeight);
console.log(div.clientWidth);
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);

返回整个元素的高度（包括带滚动条的隐蔽的地方）

1
2
3
4
console.log(div.clientHeight);
console.log(div.clientWidth);
console.log(document.body.clientHeight);
console.log(document.body.clientWidth);

元素在一个盒子内的坐标

html

1
<div class="demo"></div>

css

1
2
3
4
5
6
7
*{margin:0; padding:0;}
.demo {
    width: 400px;
    height: 400px;
    background-color: pink;
    margin: 100px;
}

script

1
2
3
4
5
6
7
var div = document.getElementsByTagName("div")[0];
div.onmousemove = function(event) {
    var event = event || window.event;
    var x = event.clientX - this.offsetLeft;
    var y = event.clientY - this.offsetTop;
    this.innerHTML = x + "px" + y + "px";
}