Element对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)
1. Element.id
Element.id 属性返回指定元素的 id 属性,该属性可读写
// HTML 代码为
var p = document.querySelector('p');
p.id // "foo"
2.Element.className
className 属性用来读写当前元素节点的 class 属性。它的值是一个字符 串,每个 class 之间用空格分割
// HTML 代码 < div class="one two three" id="myDiv"></div>
var div = document.getElementByid('myDiv')
div.className
3.Element.classList
classList 对象有下列方法
add() :增加一个 class。
remove() :移除一个 class。
contains() :检查当前元素是否包含某个 class。
toggle() :将某个 class 移入或移出当前元素。
var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果 myCssClass 不存在就加入,否则移除 div.classList.contains('myCssClass'); // 返回 true 或者 false
4.Element.innerHTML
Element.innerHTML 属性返回一个字符串,等同于该元素包含的所有 HTML 代码。
该属性可读写,常用来设置某个节点的内容。它能改 写所有元素节点的内容,
包括<html>和 <body>元素
el.innerHTML = ' ';
5.Element.innerText
innerText 和 innerHTML 类似,不同的是 innerText 无法识别元素,会直接渲染成字符串
6.Element获取元素位置
属性 描述
clientHeight 获取元素高度包括 padding 部分,但是不包括 border 、 margin
clientWidth 获取元素宽度包括 padding 部分,但是不包括 border 、 margin
scrollHeight 元素总高度,它包括 padding ,但是不包括 border 、 margin 包括溢出的不可见内容 scrollWidth 元素总宽度,它包括 padding ,但是不包括 border 、 margin 包括溢出的不可见内容 scrollLeft 元素的水平滚动条向右滚动的像素数量
scrollTop 元素的垂直滚动条向下滚动的像素数量
offsetHeight 元素的 CSS 垂直高度(单位像素),包括元素本身的高度、 padding 和 border offsetWidth 元素的 CSS 水平宽度(单位像素),包括元素本身的高度、padding 和 border offsetLeft 到定位父级左边界的间距
offsetTop 到定位父级上边界的间距
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.clientHeigh
Element.scrollHeight,Element.scrollWidth
Element.scrollHeight 属性返回一个整数值(小数会四舍五入),表示当前 元素的总高度(单位像素),它包括 padding ,但是不包括 border 、 margin 以及水平滚动条的高度(如果有水平滚动条的话)
Element.scrollWidth 属性表示当前元素的总宽度(单位像素),其他地方 都与 scrollHeight 属性类似。这两个属性只读
整张网页的总高度可以从 document.documentElement 或 document.body 上读取
// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight
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);
05-30
493
09-19
170