WEB API —— Element 之 屬性

元素——文檔中所有對象繼承的最基礎的基類。他只有所有元素所共有的方法和屬性。更具體的類繼承自 Element 。

例如:

HTML Element接口是所有 HTML 元素的基本接口,而 SVG Element 接口是所有 SVG 元素的基本接口。

大多數功能是在類的層級下具體指定的。

屬性:

1.attribute

Element.attributes 屬性返回指定節點的所有屬性的實時集合。 它是一個 NamedNodeMap,而不是一個Array,所以它沒有Array方法,而且Attr節點的索引在瀏覽器中可能會有所不同。 更具體地說,屬性是表示關于該屬性的任何信息的鍵/值對的字符串。

2.classLists

Element.classList —— 只讀屬性,返回元素的類的實時 DOMTokenList 集合。

方法:

1)add (String) 給元素添加一個 class,如果給定的這個 class 已添加則忽略;

2)remove(String) 刪除元素的一個給定 class,如果元素沒有這個 class ,也不報錯;

3)item(Number) 返回 classList 指定 index 的值 ,類似于Element.classList[Number];

4)toggle(String) 如果存在這個 class,則將其刪除,并返回 false;如果不存在這個 class,則將其添加在元素上,并返回 true;

5)contains(String) classList中存在 String 這個 class,則返回 true,否則返回 false;

6)replace(old Class,newClass) 用 newClass 替換 oldClass。oldClass 不存在則不替換。

3.className

Element.className—— 獲取或設置元素的 class ,獲取的 class 是字符串。

4.

Element.clientHeight——height + padding

Element.clientWidth——width+ padding

HTMLElement.offsetHeight——height + padding + border-top + border-bottom

HTMLElement.offsetWidth——width+ padding + border-left + border-right

Element.scrollHeight / Element.scrollWidth 包括被掩藏未顯示的部分

以上三種都會將值轉換為整數,如要獲得小數值,可使用 Element.getBoundingClientRect(),這個方法會返回一個包含元素尺寸及其相對于視窗的位置的對象。

5.innerHTML

獲取或設置元素的內容

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 原文 https://www.kancloud.cn/dennis/tgjavascript/241852 一、節...
    LuckyS007閱讀 863評論 0 0
  • Element對象對應網頁的HTML標簽元素。每一個HTML標簽元素,在DOM樹上都會轉化成一個Element節點...
    周花花啊閱讀 1,104評論 0 0
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,923評論 18 139
  • 六祖慧能大師在悟道前,偶爾聽到有人念“應無所住而生其心”這句經文,心中豁然開悟,于是問此人念的是什么經?此人說是《...
    善馨閱讀 2,213評論 0 1
  • 寫在前面: 這不是一篇讀后感,只是一本書的干貨分享。因為當時明月已經寫得很直白了,我只是整理了一下自己的思路作以分...
    小P的P閱讀 1,046評論 1 8