目录
Element获取元素位置一
Element.clientHeight，Element.clientWidth
Element.clientHeight 属性返回一个整数值，表示元素节点的 CSS 高度（单 位像素），只对块级元素生效，对于行内元素返回 0 。如果块级元 素没有设置 CSS 高度，则返回实际高度
除了元素本身的高度，它还包括 padding 部分，但是不包括 border 、 margin 。如果有水平滚动条，还要减去水平滚动条的高度。注意，这 个值始终是整数，如果是小数会被四舍五入。
Element.clientWidth 属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和 padding ，如果有垂直滚动条，还 要减去垂直滚动条的宽度。
document.documentElement 的 clientHeight 属性，返回当前视口的高度（即浏览 器窗口的高度）。 document.body 的高度则是网页的实际高度。
// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight
Element.clientLeft，Element.clientTop
Element.clientLeft 属性等于元素节点左边框（left border）的宽度（单位 像素），不包括左侧的 padding 和 margin 。如果没有设置左边框，或者 是行内元素（ display: inline ），该属性返回 0 。该属性总是返回整数 值，如果是小数，会四舍五入
Element.clientTop 属性等于网页元素顶部边框的高度（单位像素）
var box = document.getElementById("box");
console.log(box.clientLeft);
console.log(box.clientTop);
Element.scrollHeight，Element.scrollWidth
Element.scrollHeight 属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），它包括 padding ，但是不包括 border 、 margin 以及水平滚动条的高度（如果有水平滚动条的话）
Element.scrollWidth 属性表示当前元素的总宽度（单位像素），其他地方都与 scrollHeight 属性类似。这两个属性只读整张网页的总高度可以从 document.documentElement 或 document.body 上读取
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
Element获取元素位置二
Element.scrollLeft，Element.scrollTop
Element.scrollLeft 属性表示当前元素的水平滚动条向右侧滚动的像素数量， Element.scrollTop 属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0 如果要查看整张网页的水平的和垂直的滚动距离，要从 document.documentElement 元素上读取
document.documentElement.scrollLeft
document.documentElement.scrollTop
Element.offsetHeight，Element.offsetWidth
Element.offsetHeight 属性返回一个整数，表示元素的 CSS 垂直高度（单位 像素），包括元素本身的高度、padding 和 border，以及水平滚动 条的高度（如果存在滚动条）。 Element.offsetWidth 属性表示元素的 CSS 水平宽度（单位像素），其他都与 Element.offsetHeight 一致。 这两个属性都是只读属性，只比 Element.clientHeight 和 Element.clientWidth 多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如 display: none; ），则返回 0
Element.offsetLeft，Element.offsetTop
Element.offsetLeft 返回当前元素左上角相对于 Element.offsetParent 节点的水平位移， Element.offsetTop 返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移
<div class="parent">
<div class="box" id="box"></div>
</div>.parent{
width: 200px;
height: 200px;
background: red;
position: relative;
left: 50px;
top: 50px;
}
.box{
width: 100px;
height: 100px;
background: yellow;
position: relative;
left: 50px;
top: 50px;
}var box = document.getElementById("box");
console.log(box.offsetLeft);
console.log(box.offsetTop);
Element对象_方法
Element.focus()
Element.focus 方法用于将当前页面的焦点，转移到指定元素上
document.getElementById('my-span').focus();Element.blur()
Element.blur 方法用于将焦点从当前元素移除
Element.remove()
Element.remove 方法用于将当前元素节点从它的父节点移除
var el = document.getElementById('mydiv');
el.remove();Element.getBoundingClientRect()
Element.getBoundingClientRect 方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息
var rect = obj.getBoundingClientRect();getBoundingClientRect 方法返回的 rect 对象，具有以下属性（全部为只读）
x ：元素左上角相对于视口的横坐标
y ：元素左上角相对于视口的纵坐标
height ：元素高度
width ：元素宽度
left ：元素左上角相对于视口的横坐标，与 x 属性相等
right ：元素右边界相对于视口的横坐标（等于 x + width ）
top ：元素顶部相对于视口的纵坐标，与 y 属性相等
bottom ：元素底部相对于视口的纵坐标（等于 y + height ）
Attribute属性的操作
HTML 元素包括标签名和若干个键值对，这个键值对就称为“属性” （attribute）
元素节点提供四个方法，用来操作属性
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
Element.getAttribute()
Element.getAttribute 方法返回当前元素节点的指定属性。如果指定属性不存在，则返回 null
// HTML代码为
// <div id="div1" align="left">
var div = document.getElementById('div1');
div.getAttribute('align') // "left"
Element.setAttribute()
Element.setAttribute 方法用于为当前元素节点新增属性。如果同名属性已
存在，则相当于编辑已存在的属性var d = document.getElementById('d1');
d.setAttribute('align', 'center');下面是对 img 元素的 src 属性赋值的例子
var myImage = document.querySelector('img');
myImage.setAttribute('src','images/girl.png');
Element.hasAttribute()
Element.hasAttribute 方法返回一个布尔值，表示当前元素节点是否包含指定属性
var d = document.getElementById('box');
if (d.hasAttribute('align')) {
d.setAttribute('align', 'center');
}Element.removeAttribute()
Element.removeAttribute 方法用于从当前元素节点移除属性
// HTML 代码为
// <div id="box" align="left" width="200px">
document.getElementById('box').removeAttribute('align');
// 现在的HTML代码为
// <div id="box" width="200px">dataset 属性
有时，需要在HTML元素上附加数据，供 JavaScript 脚本使用。一 种解决方法是自定义属性使用标准提供的 data-* 属性
<div id="box" data-itxiaotong="itxiaotong">然后，使用元素节点对象的 dataset 属性，它指向一个对象，可以用来操作 HTML 元素标签的 data-* 属性
var n = document.getElementById('box');
n.dataset.itxiaotong// itxiaotong
n.dataset.itxiaotong= 'itxiaotong' 