目录
【1】DOM对象 className属性对类的操作
【2】DOM对象 classList属性对类的操作
- 添加 add( String [, String] )
- 删除 remove( String [,String] )
- 查询 contains( String )
- 替换 replace( oldClass, newClass )
- 索引查询 item ( Number )
【3】DOM对象 Attribute()方法对类的操作
- 添加 setAttribute()
- 删除 removeAttribute()
- 查询 getAttribute()
【4】兼容式
【1】DOM对象 className属性对类的操作
一、概念
className 获取或设置指定元素的class属性的值。
1、获取属性值：Element.className
2、设置属性值：Element.className = classname
注意：使用名称className而不是class作为属性名，是因为"class" 在JavaScript中是个保留字。
二、效果
三、代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试页面</title><style type="text/css">#btn{padding: 5px 15px;background-color: #20BDFF;width: 50px;text-align: center;color: white;border-radius: 2px;cursor: pointer;}</style><script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){alert(btn.className);btn.className = "Hello";}}</script></head><body><div id="btn" class="Test">按钮</div></body>
</html>
【2】DOM对象 classList属性对类的操作
一、概念
Element.classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合。
使用 classList 是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。
1、添加 add( String [, String] )
添加指定的类值。
- 添加一个类：Element.classList.add("className1");
- 添加多个类：Element.classList.add("className1","className2");
2、删除 remove( String [,String] )
删除指定的类值，如果指定的类不存在，则不执行任何操作。
- 删除一个类：Element.classList.remove("className1");
- 删除多个类：Element.classList.remove("className1","className2");
3、查询 contains( String )
检查元素的类属性中是否存在指定的类，其返回值为true或者false。
- 查询指定的类：Element.classList.contains("className1");
4、替换 replace( oldClass, newClass )
用一个新类替换已有类，如果指定的类不存在，则不执行任何操作。
- 替换成指定类：Element.classList.replace("oldClass","newClass");
5、索引查询 item ( Number )
按集合中的索引返回类值。
二、效果
三、代码
<html><head><meta charset="utf-8"><title>测试页面</title><style type="text/css">#btn{padding: 5px 15px;background-color: #20BDFF;width: 50px;text-align: center;color: white;border-radius: 2px;cursor: pointer;}#content{padding: 15px 15px;}.red{color: red;}.fontSize{font-size: 20px;}.bold{font-weight: bold;}.blue{color: blue;}</style><script type="text/javascript">window.onload = function(){var btn = document.getElementById("btn");var content = document.getElementById("content");var state = 1;btn.onclick = function(){if(state == 1){content.classList.add("red");state = 11;}else if(state == 11){content.classList.add("fontSize","bold");state = 2;}else if(state == 2){content.classList.remove("red");state = 22;}else if(state == 22){content.classList.remove("fontSize","bold");state = 3;}else if(state == 3){content.classList.add("red","fontSize","bold");alert(content.classList.contains("red"));state = 4;}else if(state == 4){content.classList.replace("red","blue");state = 5;}else{alert(content.classList.item(1));}}}</script></head><body><div id="btn">按钮</div><div id="content">classList属性测试</div></body>
</html>四、浏览器的兼容性
【3】DOM对象 Attribute()方法对类的操作
一、添加 setAttribute()
1、概念
setAttribute() 方法添加指定的属性，并为其赋指定的值。如果属性已经存在，则更新该值; 否则将添加一个新的属性用指定的名称和值。
语法：element.setAttribute(name, value)- name表示属性名称，value是该属性的新值注意：尽管对于不存在的属性，getAttribute() 返回 null，但还是应该使用 removeAttribute() 代替 setAttribute(attr, null) 来删除属性。
2、效果
3、代码
<html><head><meta charset="utf-8"><title>测试页面</title><style type="text/css">#btn1,#btn2{padding: 10px 15px;background-color: #20BDFF;width: 120px;text-align: center;color: white;border-radius: 2px;cursor: pointer;margin: 5px;}.shadow{box-shadow: 0px 0px 10px blue;}</style><script type="text/javascript">window.onload = function(){var btn1 = document.getElementById("btn1");btn1.onclick = function(){btn1.setAttribute("class","shadow");}}</script></head><body><div id="btn1">添加Class样式</div></body>
</html>二、删除 removeAttribute()
1、概念
removeAttribute() 方法删除指定的属性。
语法：element.removeAttribute(name)- name表示属性名称此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。
2、效果
3、代码
<html><head><meta charset="utf-8"><title>测试页面</title><style type="text/css">#btn1{padding: 10px 15px;background-color: #20BDFF;width: 140px;text-align: center;color: white;border-radius: 2px;cursor: pointer;margin: 5px;}.shadow{box-shadow: 0px 0px 10px blue;}</style><script type="text/javascript">window.onload = function(){var btn1 = document.getElementById("btn1");btn1.onclick = function(){btn1.removeAttribute("class");}}</script></head><body><div id="btn1" class="shadow">添加/替换Class样式</div></body>
</html>
三、查询 getAttribute()
1、概念
getAttribute() 方法返回指定属性名的属性值，如果指定的属性不存在，则返回 null 或 " "（空字符串）。
语法：element.getAttribute(name)- name表示获取属性的名称注意：当在被标记为 HTML 文档中的一个 HTML 元素上调用此方法时，getAttribute() 会先将其参数转换为小写形式。当指定的属性不存在于元素上时，所有浏览器（Firefox、Internet Explorer、Opera 最新版本、Safari、Konqueror 以及 iCab 等等）都返回 null，这也是当前 DOM 规范草案规定的。然而，旧的DOM 3 Core specification 认为此时正确的返回值应该是一个空字符串，一些 DOM 实现环境实现了该行为（behavior）。在 XUL (Gecko) 中，getAttribute 的实现遵从 DOM 3 Core specification，返回一个空字符串。因此，如果一个属性可能不存在于指定的元素上，在调用 getAttribute() 之前，你应该使用 element.hasAttribute() 来检测该属性是否存在。
2、效果
3、代码
<html><head><meta charset="utf-8"><title>测试页面</title><style type="text/css">#btn1,#btn2{padding: 10px 15px;background-color: #20BDFF;width: 120px;text-align: center;color: white;border-radius: 2px;cursor: pointer;margin: 5px;}</style><script type="text/javascript">window.onload = function(){var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");btn1.onclick = function(){alert(btn1.hasAttribute("class"));alert(btn1.getAttribute("class"))}btn2.onclick = function(){alert(btn1.hasAttribute("classs"));alert(btn2.getAttribute("classs"))}}</script></head><body><div id="btn1" class="Test">获取Class名称</div><div id="btn2" class="Test">获取Classs名称</div></body>
</html>【四】兼容式
1、概念
如果不考虑兼容IE10以下的话，可以用HTML5中的classList API，非常方便，兼容的方式是采用className属性和Attribute()方法，但要注意的是className属性和Attribute()方法在操作时针对的是整个属性字符串的，无法判断多个类中是否存在某个类。
2、操作
-- 删除/替换：replace()
该方法返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的函数。 原字符串不会改变。
语法：String.replace(regexp | substr ，newSubStr | function)（ pattern ） （ replacement ）参数
regexp ：一个RegExp 对象或者其字面量。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr ：一个将被 newSubStr 替换的 字符串。其被视为一整个字符串，而不是一个正则表达式。仅第一个匹配项会被替换。newSubStr ：用于替换掉第一个参数在原字符串中的匹配部分的字符串。该字符串中可以内插一些特殊的变量名。参考下面的使用字符串作为参数。
function ：一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。参考下面的指定一个函数作为参数。-- 查询：indexOf()
对于这种情况，我们可以自己写一个遍历函数对整个属性字符串中的字符一一匹配，或者通过indexOf()方法，来判断具体类中在整个属性字符串数组中的索引，如果不存在，则返回-1。例如:
【第一种】普通数组
var List= ['one', 'two', 'three', 'four', 'five'] ;
console.log(List.indexOf（"three")) ;
// 输出为: 2
console.log(List.indexOf（"six")) ;
// 输出为: -1【第二种】getAttribute
Elemeny.getAttribute('class').indexOf('name')；【第三种】className
Elemeny.className.indexOf('name')；