使用原生js获取页面信息

来源：互联网发布：sql更新多个字段编辑：程序博客网时间：2024/06/06 00:45

1.获取文档宽度/高度
console.log(document.body.scrollWidth);
console.log(document.body.scrollHeight);

console.log(document.documentElement.scrollWidth);
console.log(document.documentElement.scrollHeight);

console.log(document.body.clientWidth);
console.log(document.body.clientHeight);

2.获得窗口的宽度/高度
console.log(self.innerWidth);
console.log(self.innerHeight);

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

3.得到窗口左上角绝对坐标Top/Left
console.log(document.body.scrollTop);
console.log(document.documentElement.scrollTop);
console.log(document.body.scrollLeft);
console.log(document.documentElement.scrollLeft);

4.鼠标点击坐标相对窗口原点坐标X,Y
document.body.onclick=function(e){
console.log(e.clientX);
console.log(e.clientY);
}

5.得到鼠标点击坐标相对文档原点坐标X,Y
document.body.onclick=function(e){
console.log(e.offsetX);
console.log(e.offsetY);
console.log(e.pageX);
console.log(e.pageY);
}

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        *{            margin:0;            padding:0;        }        div{            width:100%;            height:2000px;        }    </style></head><body><div></div><script>    /*文档宽度/高度*/    console.log(document.body.scrollWidth);    console.log(document.body.scrollHeight);//    var style=window.getComputedStyle(document.body);//    console.log(style.margin);    /*文档宽度/高度*/    console.log(document.documentElement.scrollWidth);    console.log(document.documentElement.scrollHeight);    /*文档宽度/高度*/    console.log(document.body.clientWidth);    console.log(document.body.clientHeight);    /*获得窗口的宽度/高度*/    console.log(self.innerWidth);    console.log(self.innerHeight);    console.log(document.documentElement.clientWidth);    console.log(document.documentElement.clientHeight);    /*得到窗口左上角绝对坐标Top*/    console.log(document.body.scrollTop);    console.log(document.documentElement.scrollTop);    /*得到窗口左上角绝对坐标Left*/    console.log(document.body.scrollLeft);    console.log(document.documentElement.scrollLeft);    /*鼠标点击坐标相对窗口原点坐标X,Y*/    document.body.onclick=function(e){        console.log(e.clientX);        console.log(e.clientY);    }    /*得到鼠标点击坐标相对文档原点坐标X,Y*/    document.body.onclick=function(e){        console.log(e.offsetX);        console.log(e.offsetY);        console.log(e.pageX);        console.log(e.pageY);    }</script></body></html>

阅读全文

0 0