js获取元素边距和宽高

clientHeight,clientWidth

offsetHeight,offsetWidth

scrollHeight,scrollWidth

有如下图:
js获取元素边距和宽高_第1张图片
代码如下:


<html>
<head>
    <meta charset="utf-8">
    <title>测试title>
    <style>
        * {
            margin: 0;
        }
        div {
            width: 500px;
            height: 100px;
            padding: 30px;
            margin: 20px;
            border: 10px solid #ff0000;
            background-color: #eee;
        }
    style>
head>
<body>
    <div>
        编者按:近日,中央召开了两次值得关注的重要会议:一是中共中央政治局召开会议,讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
        编者按:近日,中央召开了两次值得关注的重要会议:一是中共中央政治局召开会议,讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
        编者按:近日,中央召开了两次值得关注的重要会议:一是中共中央政治局召开会议,讨论国务院拟提请第十三届全国人民代表大会第二次会议审议的《政府工作报告》稿。
    div>
    <script>
        var a = document.getElementsByTagName("div")[0];
        console.log(a.clientHeight); //160
        console.log(a.scrollHeight); //206
        console.log(a.offsetHeight); //180
    script>
body>
html>

上述代码结果得出:
clientHeight为160
clientHeight指的是元素内容及其填充所占据的空间大小
(样式中高度)100+(上填充)30+(下填充)30
注:clientHeight不包括边框高度

scrollHeight为206
网页内容实际高度,滚动大小,指的是包含滚动内容的元素大小(元素内容的总高度),它读取的是元素内容的高度。

offsetHeight为180
偏移量,包含元素在屏幕上所用的所有可见空间(包括所有的内边距滚动条和边框大小,不包括外边距,
(样式中高度)100+(上填充)30+(下填充)30+(上边框)10+(下边框)10

document.body,document.documentElement

documentElement 和 body 相关说明:
body是DOM对象里的body子节点,即 标签;
documentElement 是整个节点树的根节点root,即 标签;
实例:

console.log(document.body.clientHeight);//256
console.log(document.documentElement.clientHeight);//789

DOM把层次中的每一个对象都称之为节点,就是一个层次结构,你可以理解为一个树形结构,就像我们的目录一样,一个根目录,根目录下有子目录,子目录下还有子目录。
以HTML超文本标记语言为例:整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它,它就是整个节点树的根节点。而body是子节点,要访问到body标签,在脚本中可以写:document.body。

height,width

获取元素的宽和高

 console.log(document.getElementsByTagName("div")[0].style.height);
 console.log(document.getElementsByTagName("div")[0].style.width);

left,right

实例:

var a=document.getElementsByTagName("div")[0];
console.log(a.offsetLeft);

offsetLeft

offsetTop

scrollLeft

scrollTop

offsetParent

js获取元素边距和宽高_第2张图片
总结:
1.clientHeight, clientWidth:
这两个属性大体上显示了元素内容的象素高度和宽度.理论上说这些测量不考虑任何通过样式表加入
元素中的页边距,边框等.

2.clientLeft,clientTop:
这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.

3.scrollLeft,scrollTop:
如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
对于不可以滚动的元素,这些值总是0.

4.scrollHeight,scrollWidth:
不管有多少对象在页面上可见,他们得到的是整体.

5.style.left:
定位元素与包含它的矩形左边界的偏移量

6.style.pixelLeft:
返回定位元素左边界偏移量的整数像素值.因为属性的非像素值返回的是包含单位的字符串,例如,30px. 利用这个属性可以单独处理以像素为单位的数值.

7.style:posLetf:
返回定位元素左边界偏移量的数量值,不管相应的样式表元素指定什么单位.因为属性的非位置值返回的是包含单位的字符串,例如,1.2em

top,pixelTop,posTOp这几个类比就行了.
LEFT: 为从左向右移的位置,即挂件距离屏幕左边缘的距离;
clientLeft 返回对象的offsetLeft属性值和到当前窗口左边的真实值之间的距离
offsetLeft 返回对象相对于父级对象的布局或坐标的left值,就是以父级对象左上角为坐标原点,向右和向下为X、Y轴正方向的x坐标
pixelLeft 设置或返回对象相对于窗口左边的位置
scrollWidth 是对象的实际内容的宽,不包边线宽度,会随对象中内容的多少改变(内容多了可能会改变对象的实际宽度)。
clientWidth 是对象可见的宽度,不包滚动条等边线,会随窗口的显示大小改变。
offsetWidth 是对象的可见宽度,包滚动条等边线,会随窗口的显示大小改变。
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

offsetwidth:是元素相对父元素的偏移宽度。等于border+padding+width
clientwidth:是元素的可见宽度。等于padding+width
scrollwidth:是元素的宽度且包括滚动部分。
offsetLeft:Html元素相对于自己的offsetParent元素的位置
scrollLeft:返回和设置当前横向滚动务的坐标值

innerWidth,innerHeight

定义和用法
innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
注意:使用 outerWidth 和 outerHeight 属性获取加上工具条与滚动条窗口的宽度与高度。
语法
Get:
window.innerWidth
window.innerHeight
设置:
window.innerWidth=pixels
window.innerHeight=pixels
实例:

 console.log(window.innerHeight);//789
 console.log(window.innerWidth);//861

outerWidth,outerHeight

outerHeight属性设置或返回一个窗口的外部高度,包括所有界面元素(如工具栏/滚动条)。
outerWidth属性设置或返回窗口的外部宽度,包括所有的界面元素(如工具栏/滚动)。
注意: 使用 innerWidth 和 innerHeight 属性获取去除工具条与滚动条的窗口高度与宽度。
语法
Get:
window.outerWidth
window.outerHeight
Set:
window.outerWidth=pixels
window.outerHeight=pixels
实例:

 console.log(window.outerHeight);//900
 console.log(window.outerWidth);//1440

Screen对象

Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。

对象属性:

availHeight

返回屏幕的高度(不包括Windows任务栏)
availHeight 属性声明了显示浏览器的屏幕的可用高度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。
实例:

document.write("可用高度: " + screen.availHeight);

availWidth

返回屏幕的宽度(不包括Windows任务栏)
availWidth 属性声明了显示浏览器的屏幕的可用宽度,以像素计。在 Windows 这样的操作系统中,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。
实例:

document.write("可用宽度: " + screen.availWidth);

colorDepth

返回目标设备或缓冲器上的调色板的比特深度
colorDepth 属性返回目标设备或缓冲器上的调色板的比特深度。

document.write("颜色深度: " + screen.colorDepth);

height

返回屏幕的总高度
height 属性声明了显示浏览器的屏幕的高度,以像素计。
实例:

document.write("总高度: " + screen.height);

width

返回屏幕的总宽度
width 属性声明了显示浏览器的屏幕的宽度,以像素计。

document.write("总宽度: " + screen.width);

pixelDepth

返回屏幕的颜色分辨率(每象素的位数)
pixelDepth 属性返回显示屏幕的颜色分辨率(比特每像素)。
实例:

document.write("颜色分辨率: " + screen.pixelDepth);

你可能感兴趣的:(原生js)