欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

获取元素、浏览器、屏幕分辨率宽度,高度,坐标的方法及其区别

程序员文章站 2022-04-25 09:51:09
...

首先我们弄出来俩个div,分别加上样式:

<DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .wrap{
        width: 300px;
        height: 300px;
        margin: 30px;
        padding: 10px;
        border: 4px solid;
        background: yellow;
        position: relative;
    }
    .inner{
        width: 140px;
        height: 140px;
        padding: 10px;
        border:2px solid;
        background: orange;
    }
    </style>
</head>
<body>
    <div class="wrap" style="width:300px;height:300px;">
        <div class="inner" style="width:140px;height:140px;"></div>
    </div>
</body>
</html>

获取元素、浏览器、屏幕分辨率宽度,高度,坐标的方法及其区别
然后在js里面获取到这俩个div

var ins = document.getElementsByClassName("inner")[0],
    wrap = document.getElementsByClassName("wrap")[0];

下面开始获取元素的宽度和高度

1.offsetWidth,offsetHeight方法计算宽度和高度的时候包含border跟padding的距离。

var iwidth = ins.offsetWidth,
    iHeight = ins.offsetHeight,
    wWidth = wrap.offsetWidth,
    wHeight = wrap.offsetHeight;

2.clientWidth,clientHeight方法计算时包含padding不包含border;(不包括滚动条的宽高)

var iWidth = ins.clientWidth,
    iHeight = ins.clientHeight,
    wWidth = wrap.clientWidth,
    wHeight = wrap.clientHeight;

3.NODE.style.width,NODE.style.height获取样式的宽高,获取到的宽高不包括padding和border。

var iwidth = ins.style.width,
    iheight = ins.style.height,
    wwidth = wrap.style.width,
    wheight = wrap.style.height;

获取元素的距其offsetParent元素的顶部/左侧间距:

//获取元素X,Y轴坐标位置
var insOffLeft = ins.offsetLeft,
    insOffTop = ins.offsetTop,
    wrapOffLLeft = wrap.offsetLeft,
    wrapOffTop = wrap.offsetTop;

获取元素有定位的最近的父元素:

如果一直找到body都没有有定位的父元素,那么返回的就是body。如果有很多有定位的父元素,那么就近优先。

var insParent = ins.offsetParent,
	wrapParent = wrap.offsetParent;

获取元素的左边框和上边框宽度:

var insBorderLeft = ins.clientLeft,
	insBorderTop = ins.clientTop,
	wrapBorderLeft = wrap.clientLeft,
	wrapBorderTop = wrap.clientTop;

获取浏览器宽度高度的方法:

var llw = document.documentElement.clientWidth,
	llh = document.document.clientHeight;

获取页面的宽高:

var docWidth = document.documentElement.scrollWidth,
	docHeight = document.documentElement.scrollHeight;

获取屏幕分辨率的宽,高:

var screenH = window.screen.height,
	screenW = window.screen.width;

获取窗口的宽高:

window.innerWidth
window.innerHeight
document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight