## 類選擇器設(shè)置 CSS 樣式
通過 CSS 的類選擇器為 HTML 頁面中的元素定義 CSS 樣式，是我們開發(fā)中比較常見的一種方式。
我們也可以通過 HTML 頁面元素 class 屬性獲取其對應(yīng)的 CSS 樣式。
```html
<style>
.button {
background-color: orange;
}
</style>
```
## Element 對象的 className 屬性
Element 對象提供了 className 屬性用于獲取 HTML 頁面中指定元素的 class 屬性值。
> **值得注意的是:** Element 對象提供的是 className 屬性，并不是 class 屬性。原因是 class 在 JavaScript 中是關(guān)鍵字。
className 屬性的的語法結(jié)構(gòu)如下:
```javascript
var cName = elementNodeReference.className;
```
上述語法結(jié)構(gòu)中，className 屬性返回值 cName 表示一個字符串變量。表示當前元素的class屬性的值，可以是由空格分隔的多個class屬性值。
我們可以通過以下示例代碼，學(xué)習(xí) className 屬性的使用:
```javascript
var btn = document.getElementById('btn');
console.log(btn.className);
```
上述示例代碼輸出的結(jié)果如下:
## Element 對象的 classList 屬性
Element 對象的 className 屬性雖然可以獲取 HTML 頁面中指定元素的 class 屬性值，但返回值的是字符串類型。如果 HTML 頁面中指定元素的 class 屬性值為多個樣式的話，對于我們操作會比較麻煩。
Element 對象還提供了 classList 屬性，該屬性可以獲取 HTML 頁面指定元素的 class 屬性值的列表。其語法結(jié)構(gòu)如下:
```javascript
var elementClasses = elementNodeReference.classList;
```
上述語法結(jié)構(gòu)中，classList 屬性返回值 elementClasses 表示HTML 頁面元素的 class 屬性值所組成的列表。
我們可以通過以下示例代碼，學(xué)習(xí) classList 屬性的使用:
```javascript
var btn = document.getElementById('btn');
var elemClasses = btn.classList;
for(var i=0; i<elemClasses.length; i++){
var elemClass = elemClasses[i];
console.log(elemClass);
}
```
上述示例代碼輸出的結(jié)果如下:
## 瀏覽器兼容問題
Element 對象的 classList 屬性，在 IE 8 及之前版本的瀏覽器中并不支持。所以，我們要想在各個瀏覽器中都支持該屬性。
需要在 HTML 頁面中引入以下 JavaScript 文件:
```javascript
/*
* classList.js: Cross-browser full element.classList implementation.
* 1.1.20170427
*
* By Eli Grey, http://eligrey.com
* License: Dedicated to the public domain.
* See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
*/
/*global self, document, DOMException */
/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
if ("document" in self) {
// Full polyfill for browsers with no classList support
// Including IE < Edge missing SVGElement.classList
if (!("classList" in document.createElement("_"))
|| document.createElementNS && !("classList" in document.createElementNS("http://www.w3.org/2000/svg","g"))) {
(function (view) {
"use strict";
if (!('Element' in view)) return;
var
classListProp = "classList"
, protoProp = "prototype"
, elemCtrProto = view.Element[protoProp]
, objCtr = Object
, strTrim = String[protoProp].trim || function () {
return this.replace(/^\s+|\s+$/g, "");
}
, arrIndexOf = Array[protoProp].indexOf || function (item) {
var
i = 0
, len = this.length
;
for (; i < len; i++) {
if (i in this && this[i] === item) {
return i;
}
}
return -1;
}
// Vendors: please allow content code to instantiate DOMExceptions
, DOMEx = function (type, message) {
this.name = type;
this.code = DOMException[type];
this.message = message;
}
, checkTokenAndGetIndex = function (classList, token) {
if (token === "") {
throw new DOMEx(
"SYNTAX_ERR"
, "An invalid or illegal string was specified"
);
}
if (/\s/.test(token)) {
throw new DOMEx(
"INVALID_CHARACTER_ERR"
, "String contains an invalid character"
);
}
return arrIndexOf.call(classList, token);
}
, ClassList = function (elem) {
var
trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
, classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
, i = 0
, len = classes.length
;
for (; i < len; i++) {
this.push(classes[i]);
}
this._updateClassName = function () {
elem.setAttribute("class", this.toString());
};
}
, classListProto = ClassList[protoProp] = []
, classListGetter = function () {
return new ClassList(this);
}
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
return this[i] || null;
};
classListProto.contains = function (token) {
token += "";
return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function () {
var
tokens = arguments
, i = 0
, l = tokens.length
, token
, updated = false
;
do {
token = tokens[i] + "";
if (checkTokenAndGetIndex(this, token) === -1) {
this.push(token);
updated = true;
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.remove = function () {
var
tokens = arguments
, i = 0
, l = tokens.length
, token
, updated = false
, index
;
do {
token = tokens[i] + "";
index = checkTokenAndGetIndex(this, token);
while (index !== -1) {
this.splice(index, 1);
updated = true;
index = checkTokenAndGetIndex(this, token);
}
}
while (++i < l);
if (updated) {
this._updateClassName();
}
};
classListProto.toggle = function (token, force) {
token += "";
var
result = this.contains(token)
, method = result ?
force !== true && "remove"
:
force !== false && "add"
;
if (method) {
this[method](token);
}
if (force === true || force === false) {
return force;
} else {
return !result;
}
};
classListProto.toString = function () {
return this.join(" ");
};
if (objCtr.defineProperty) {
var classListPropDesc = {
get: classListGetter
, enumerable: true
, configurable: true
};
try {
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
} catch (ex) { // IE 8 doesn't support enumerable:true
// adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36
// modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected
if (ex.number === undefined || ex.number === -0x7FF5EC54) {
classListPropDesc.enumerable = false;
objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
}
}
} else if (objCtr[protoProp].__defineGetter__) {
elemCtrProto.__defineGetter__(classListProp, classListGetter);
}
}(self));
}
// There is full or partial native classList support, so just check if we need
// to normalize the add/remove and toggle APIs.
(function () {
"use strict";
var testElement = document.createElement("_");
testElement.classList.add("c1", "c2");
// Polyfill for IE 10/11 and Firefox <26, where classList.add and
// classList.remove exist but support only one argument at a time.
if (!testElement.classList.contains("c2")) {
var createMethod = function(method) {
var original = DOMTokenList.prototype[method];
DOMTokenList.prototype[method] = function(token) {
var i, len = arguments.length;
for (i = 0; i < len; i++) {
token = arguments[i];
original.call(this, token);
}
};
};
createMethod('add');
createMethod('remove');
}
testElement.classList.toggle("c3", false);
// Polyfill for IE 10 and Firefox <24, where classList.toggle does not
// support the second argument.
if (testElement.classList.contains("c3")) {
var _toggle = DOMTokenList.prototype.toggle;
DOMTokenList.prototype.toggle = function(token, force) {
if (1 in arguments && !this.contains(token) === !force) {
return force;
} else {
return _toggle.call(this, token);
}
};
}
testElement = null;
}());
}
```
該文件的下載地址為: [https://github.com/eligrey/classList.js/blob/master/classList.js](https://github.com/eligrey/classList.js/blob/master/classList.js)
- 關(guān)于
- 第一章 DOM 是什么
- 第一節(jié) DOM 介紹
- 第二節(jié) DOM 樹結(jié)構(gòu)
- 第二章 Document 對象
- 第一節(jié) Document 對象介紹
- 第二節(jié) 定位頁面元素
- 第三節(jié) 創(chuàng)建頁面元素
- 第三章 Node 對象
- 第一節(jié) Node 對象介紹
- 第二節(jié) 判斷節(jié)點類型
- 第三節(jié) 遍歷節(jié)點
- 第四節(jié) 插入節(jié)點
- 第五節(jié) 刪除節(jié)點
- 第六節(jié) 替換節(jié)點
- 第七節(jié) 復(fù)制節(jié)點
- 第八節(jié) textContent 屬性
- 第四章 Element 對象
- 第一節(jié) Element 對象介紹
- 第二節(jié) DOM 元素樹
- 第三節(jié) 定位頁面元素
- 第四節(jié) 遍歷元素
- 第五節(jié) 屬性操作
- 第六節(jié) innerHTML 屬性
- 第五章 樣式操作
- 第一節(jié) 獲取內(nèi)聯(lián)樣式
- 第二節(jié) 獲取外聯(lián)樣式表
- 第三節(jié) 獲取 class 屬性
- 第四節(jié) 獲取當前有效樣式
- 第五節(jié) 設(shè)置內(nèi)聯(lián)樣式
- 第六節(jié) 設(shè)置 class 屬性
- 第七節(jié) Element 對象的樣式屬性
- 第六章 事件
- 第一節(jié) 什么是事件
- 第二節(jié) 注冊事件
- 第三節(jié) 移除注冊事件
- 第四節(jié) Event 事件對象
- 第五節(jié) 獲取目標元素
- 第六節(jié) 阻止默認行為
- 第七節(jié) 獲取鼠標坐標
- 第八節(jié) 事件流
- 第九節(jié) 事件委托
- 第七章 表單操作
- 第一節(jié) 獲取表單
- 第二節(jié) 表單操作
- 第三節(jié) 表單驗證
- 第四節(jié) 表單提交
- 第八章 BOM
- 第一節(jié) BOM 是什么
- 第二節(jié) Window 對象
- 第三節(jié) Navigator 對象
- 第四節(jié) History 對象
- 第五節(jié) Location 對象
- 第六節(jié) 定時器