位置的获取
-
offsetX/offsetY: 事件触发相对于当前元素自身的位置(包括padding为正，border为负) -
clientX/clientY: 事件触发相对于浏览器可视区域的位置 (不包括滚动出去的范围的) -
pageX/pageY: 事件触发相对于整个网页的位置 (包括滚动出去的范围的) -
screenX/screenY: 事件触发相对于屏幕的位置（不常用）
* {
margin: 0;
padding: 0;
}
div {
width: 100px;
height: 100px;
margin-left: 50px;
margin-top: 50px;
padding: 20px;
border: 30px solid #cccccc;
background-color: red;
}
<div></div>
<script>
let oDiv = document.querySelector("div")
oDiv.onclick = function (event) {
event = event || window.event
console.log("offsetX " + event.offsetX)
console.log("offsetY " + event.offsetY)
console.log("-----------------------")
console.log("clientX " + event.clientX)
console.log("clientY " + event.clientY)
console.log("-----------------------")
console.log("pageX " + event.pageX)
console.log("pageY " + event.pageY)
console.log("-----------------------")
}
</script>
位置
样式获取
-
getComputedStyle: 获取最终样式
var style = getComputedStyle(oDiv);
通过getComputedStyle获取宽高不包括 边框和内边距
只支持获取, 不支持设置
只支持IE9及以上浏览器
-
currentStyle: 获取样式
var style = oDiv.currentStyle;
通过currentStyle获取宽高不包括 边框和内边距
只支持获取, 不支持设置
只支持IE9及以下浏览器
-
style: 获取样式
oDiv.style.width = "100px";
通过style获取宽高不包括 边框和内边距
只能获取内设置的宽高
支持获取和设置
高低级浏览器都兼容
宽高获取
-
offsetWidth和offsetHeight获取元素宽高
边框 + 内边距 + 元素宽高 -
clientWidth和clientHeight获取元素宽高
获取的宽高包含 内边距 + 元素宽高 -
scrollWidth和scrollHeight获取元素宽高
内容没有超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth
scrollHeight: = 元素高度 + 内边距的高度 == clientHeight
内容超出元素范围时
scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度
scrollHeight: = 元素高度 + 内边距的高度 + 超出的高度
位置获取
-
offsetLeft/offsetTop: 距离第一个定位祖先元素偏移位 || body -
clientLeft/clientTop: 左边框 和 顶部边框 -
scrollTop / scrollLeft: 超出元素内边距 顶部 和 左边 的距离
网页高度获取
-
window.innerWidth/window.innerHeight: 在IE9以及IE9以上的浏览器中才能获取 -
document.documentElement.clientWidth / document.documentElement.clientHeight:
在IE9以下的浏览器的标准模式中获取 -
document.body.clientWidth / document.body.clientHeight:
在IE9以下的浏览器的怪异模式中获取
注：html文档中有 <!DOCTYPE html> 为标准模式，否则为怪异模式
document.compatMode === "CSS1Compat" // 标准渲染模式
document.compatMode === "BackCompat" // 怪异渲染模式
兼容写法：获取网页高度 / 宽度
function getScreen() {
let width, height;
if(window.innerWidth){
width = window.innerWidth;
height = window.innerHeight;
}else if(document.compatMode === "BackCompat"){
width = document.body.clientWidth;
height = document.body.clientHeight;
}else{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
}
return {
width: width,
height: height
}
}
兼容写法：获取屏幕滚动高度 / 宽度
function getPageScroll() {
let x, y;
if(window.pageXOffset){
x = window.pageXOffset;
y = window.pageYOffset;
}else if(document.compatMode === "BackCompat"){
x = document.body.scrollLeft;
y = document.body.scrollTop;
}else{
x = document.documentElement.scrollLeft;
y = document.documentElement.scrollTop;
}
return {
x: x,
y: y
}
}
函数防抖和节流
- 函数防抖
/**
* 函数防抖 - 只会执行一次，只能看到结果
* @param {*} callback
* @param {*} delay
*/
function debounce(callback, delay) {
let timerId = null;
return function () {
let that = this;
let args = arguments;
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
callback.apply(that, args);
}, delay || 1000);
}
}
- 函数节流
/**
* 函数节流 - 会执行几次不等，能看到过程
* @param {*} callback
* @param {*} delay
*/
function throttle(callback, delay) {
let timerId = null;
let flag = true;
return function () {
if(!flag) return;
flag = false;
let that = this;
let args = arguments;
timerId && clearTimeout(timerId);
timerId = setTimeout(function () {
flag = true;
callback.apply(that, args);
}, delay || 1000);
}
}
END
网友评论