目录
- 添加 add( String [, String] )
- 删除 remove( String [,String] )
- 查询 contains( String )
- 替换 replace( oldClass, newClass )
- 索引查询 item ( Number )
- 添加 setAttribute()
- 删除 removeAttribute()
- 查询 getAttribute()
【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')；