中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：HTML DOM children 屬性 下一篇：HTML DOM className 屬性

HTML DOM classList 屬性

元素對(duì)象參考手冊(cè) 元素對(duì)象

實(shí)例

為 <div> 元素添加 class:

document.getElementById("myDIV").classList.add("mystyle");

運(yùn)行代碼 ?

定義和用法

classList 屬性返回元素的類名，作為 DOMTokenList 對(duì)象。

該屬性用于在元素中添加，移除及切換 CSS 類。

classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)。

屬性
classList 8.0 10.0 3.6 5.1 11.5

語(yǔ)法

element.classList

Properties

屬性 Description
length 返回類列表中類的數(shù)量

該屬性是只讀的

方法

方法 描述
add(class1, class2, ...) 在元素中添加一個(gè)或多個(gè)類名。

如果指定的類名已存在，則不會(huì)添加
contains(class) 返回布爾值，判斷指定的類名是否存在。

可能值：

  • true - 元素包已經(jīng)包含了該類名
  • false - 元素中不存在該類名
item(index) 返回元素中索引值對(duì)應(yīng)的類名。索引值從 0 開(kāi)始。

如果索引值在區(qū)間范圍外則返回 null
remove(class1, class2, ...) 移除元素中一個(gè)或多個(gè)類名。

注意： 移除不存在的類名，不會(huì)報(bào)錯(cuò)。
toggle(class, true|false) 在元素中切換類名。

第一個(gè)參數(shù)為要在元素中移除的類名，并返回 false。
如果該類名不存在則會(huì)在元素中添加類名，并返回 true。

第二個(gè)是可選參數(shù)，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類，不管該類名是否存在。例如：

移除一個(gè) class: element.classList.toggle("classToRemove", false);
添加一個(gè) class: element.classList.toggle("classToAdd", true);

注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二個(gè)參數(shù)。

技術(shù)描述

返回值： 一個(gè) DOMTokenList, 包含元素的類名列表
實(shí)例

更多實(shí)例

實(shí)例

為 <div> 元素添加多個(gè)類:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

運(yùn)行代碼 ?

實(shí)例

為 <div> 元素移除一個(gè)類:

document.getElementById("myDIV").classList.remove("mystyle");

運(yùn)行代碼 ?

實(shí)例

為 <div> 元素移除多個(gè)類:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

運(yùn)行代碼 ?

實(shí)例

為 <div> 元素切換類:

document.getElementById("myDIV").classList.toggle("newClassName");

運(yùn)行代碼 ?

實(shí)例

獲取 <div> 元素的類名:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

var x = document.getElementById("myDIV").classList;

x 輸出結(jié)果為:

mystyle anotherClass thirdClass

運(yùn)行代碼 ?

實(shí)例

查看 <div> 元素有多少個(gè)類名:

var x = document.getElementById("myDIV").classList.length;

x 輸出結(jié)果為:

3

運(yùn)行代碼 ?

實(shí)例

獲取 <div> 元素的第一個(gè)類名（索引為0）:

var x = document.getElementById("myDIV").classList.item(0);

x 輸出結(jié)果為:

mystyle

運(yùn)行代碼 ?

實(shí)例

查看元素是否存在 "mystyle" 類:

var x = document.getElementById("myDIV").classList.contains("mystyle");

x 輸出結(jié)果為:

true

運(yùn)行代碼 ?

實(shí)例

查看元素是否存在 "mystyle" 類，如果存在則移除另外一個(gè)類名:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
??? x.classList.remove("anotherClass");
} else {
??? alert("Could not find it.");
}

運(yùn)行代碼 ?

相關(guān)文章

CSS 教程: CSS 選擇器

CSS 參考手冊(cè): CSS .class 選擇器

HTML DOM 參考手冊(cè): HTML DOM className 屬性

HTML DOM 參考手冊(cè): HTML DOM getElementsByClassName() 方法

HTML DOM 參考手冊(cè): HTML DOM Style 對(duì)象

元素對(duì)象參考手冊(cè) 元素對(duì)象

其他擴(kuò)展
上一篇：HTML DOM children 屬性 下一篇：HTML DOM className 屬性