原生JS获取元素的位置与尺寸实现方法

1、内高度、内宽度： 内边距 + 内容框

clientWidth
clientHeight

2、外高度，外宽度： 边框 + 内边距 + 内容框

offsetWidth
offsetHeight

3、上边框、左边框

clientTop
clientLeft

4、元素的大小及其相对于视口的位置

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离

5、上边偏移量，左边的偏移量

offsetTop
offsetLest

6、可视区域的大小

document.documentElement.clientWidth
document.documentElement.clientHeight

7、页面的实际大小

document.documentElement.scrollWidth
document.documentElement.scrollHeight

8、窗口左上角 与 屏幕左上角的 距离

window.screenX、
window.screenY

9、屏幕宽高

window.screen.width
window.screen.height

10、屏幕可用宽高（去除任务栏）

window.screen.availWidth
window.screen.availHeight

11、窗口的内高度、内宽度（文档显示区域+滚动条）

window.innerWidth
window.innerHeight

12、窗口的外高度、外宽度

window.outerWidth
window.outerHeiht

以上这篇原生JS获取元素的位置与尺寸实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript获取元素尺寸和大小操作总结

    一.获取元素的行内样式 复制代码 代码如下: var obj = document.getElementById("test"); alert(obj.height + "\n" + obj.width); // 200px 200px typeof=string只是将style属性中的值显示出来 二.获取计算后的样式 复制代码 代码如下: var obj = document.getElementById("test"); var style

  • JavaScript DOM元素尺寸和位置

    一 获取元素的CSS大小 1.通过style内联获取元素的大小 复制代码 代码如下: var box = document.getElementById('box');    // 获得元素;      box.style.width;                             // 200px;      box.style.height;                            // 200px; // PS:style获取只能取到行内style属性的CSS样式中

  • JS中位置与大小的获取方法

    JS中位置与大小的获取方法

    scrollHeight,clientHeight,offsetHeight的区别 说明: scrollHeight:DOM元素的实际内容的高度,不包border的高度,会随DOM元素中内容的增加(超过可视区后)而变大. clientHeight:DOM元素内容可视区的高度,不包含滚动条和边框的高度. offsetHeight:DOM元素整体的高度,包括滚动条和边框. 当滚动条不出现的时候 这时候DOM元素中没有内容或者内容不超过可视区 scrollWidth=clientWidth,两者皆为可

  • 原生JS获取元素的位置与尺寸实现方法

    1.内高度.内宽度: 内边距 + 内容框 clientWidth clientHeight 2.外高度,外宽度: 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3.上边框.左边框 clientTop clientLeft 4.元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //le

  • 原生js获取元素样式的简单方法

    我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置 在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

  • js 获取元素所有兄弟节点的实现方法

    比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i

  • 原生JS获取元素集合的子元素宽度实例

    原生JS获取元素集合的子元素宽度实例

    有些时候,在一个网页的ul li中,存在左右两个部分的内容,但是右边元素内容又是不固定,左边元素相对应的不能用固定宽度,所有需要我们动态的获取右边元素宽度,来赋值给左边元素的marginRight值. HTML结构: <ul class="itemCon"> <li class="item"> <div class="leftMess"> <div class="leftCon">

  • 原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法

    用原生js在父页面获取iframe子页面的元素,以及在子页面获取父页面元素,这是平时经常会用到的方法,这里写一个例子来总结下: 1.父页面(demo.html),在父页面修改子页面div的背景色为灰色,原来为红色: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  • js获取元素相对窗口位置的实现代码

    JS获取元素的offsetTop,offsetLeft等属性 obj.clientWidth //获取元素的宽度 obj.clientHeight //元素的高度 obj.offsetLeft //元素相对于父元素的left obj.offsetTop //元素相对于父元素的top obj.offsetWidth //元素的宽度 obj.offsetHeight //元素的高度 区别: clientWidth = width + padding clientHeight = height + p

  • 原生js获取left值和top值的三种方法

    在用js做动态效果时,通常需要获取元素绝对定位中的left和top属性值.比如做一个碰撞广告,就要不停的获取元素的top和left属性值. 需要注意的事:取值的元素必须要设置position:absolute绝对定位属性,才能取的到left值. 第一种方法,比较简单,就是直接通过obj.style.left和obj.style.top,但是有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值. 第二种方法 只读

  • 原生JS实现拖拽位置预览

    原生JS实现拖拽位置预览

    本文给大家分享一个拖拽元素时添加预览的小Demo,效果如下: 以下是代码实现,欢迎大家复制粘贴及吐槽. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现拖拽位置预览</title> <style> .box

  • 原生JS查找元素的方法(推荐)

    今天写了一个很简单.很粗暴的通过JS根据类来查找DOM元素. 为了降低它的粗暴等级(耗费性能)我给了三个等级. 首先性能最好的,适合FF,CH,IE8,通过querySelectorAll这个API. 其次是指定ID 最后只能全页面进行匹配class,不过比较节省的性能的是,在指定class名称的时候,同时传入HTML标签的类型,用于节省遍历的范围! 因为水平有限,目前也只能写成这种,真的好好奇JQ的选择器是怎么去匹配DOM的,如果有大神看到这篇文章,请不要吝啬施教... 下面贴代码: func

  • js获取元素下的第一级子元素的方法(推荐)

    js childnodes获取的是所有的子元素,而我们实际要获取第一级子元素. function getChildren(obj){ var objChild = [] ; var objs = obj.getElementsByTagName('*'); for(var i=0,j=objs.length; i<j;++i){ if(objs[i].nodeType != 1){alert(objs[i].nodeType); continue ; } var temp = objs[i].p

随机推荐