Element对象_属性

最新推荐文章于 2024-05-11 10:05:08 发布
box--小盒
最新推荐文章于 2024-05-11 10:05:08 发布
阅读量230
点赞数
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/Asher_lm/article/details/128139453
版权
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);