1.创建属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态创建属性</title> <style> .democlass{color:blue;} </style> </head> <body> <ul class="container"> <li class="child">Coffee</li> <li class="child">Tea</li> <li class="child">Coffee</li> <li class="child">Tea</li> </ul> <script> /*第一种方法(此方法仅限于css样式) var child = document.getElementsByTagName("li")[0]; child.style.color="red"; */ /*第二种方法 document.getElementsByTagName("li")[0].setAttribute("class","democlass"); */
//第三种方法 var newStyle=document.getElementsByTagName("li")[1]; var newAttr = document.createAttribute("class"); newAttr.nodeValue="democlass"; //使用value或nodeValue均可 newStyle.setAttributeNode(newAttr); </script> </body> </html>
getdd[i].className="selected"; //通过数组设置标签直接添加类名
2.获取属性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态获取属性</title> <style> .democlass{ color:blue; } </style> </head> <body> <p id="demo"></p> <ul class="example"> <li class="child1">Coffee</li> <li class="child2">Tea</li> <li class="child3">Coffee</li> <li class="child4">Tea</li> </ul> <script> /*第一种方式：返回指定属性名的属性值 var getAttr=document.getElementsByTagName("li")[0].getAttribute("class"); document.getElementById("demo").innerHTML=getAttr; */ //第二种方式:返回指定属性名的属性值，以Attr对象 var getAttr=document.getElementsByTagName("li")[0].getAttributeNode("class").value; document.getElementById("demo").innerHTML=getAttr; //二种结果都返回child1 </script> </body> </html>
3.删除属性(文字颜色)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态删除属性</title> <style> .democlass{ color:blue; } </style> </head> <body> <p id="demo"></p> <ul class="example"> <li class="child1">Coffee</li> <li class="child2 democlass">Tea</li> </ul> <script> /*第一种方式：删除指定的文字颜色属性 document.getElementsByTagName("li")[1].removeAttribute("class"); */ //第二种方式：删除指定的文字颜色属性，并以 Attr Node 对象返回被删除的属性 var n=document.getElementsByTagName("li")[1]; var a=n.getAttributeNode("class"); n.removeAttributeNode(a);
/* 此方法与 removeAttributeNode() 方法的差异是：removeAttributeNode() 方法删除指定的 Attr 对象，而此方法删除具有指定名称的属性。结果是相同的。同时此方法不返回值，而 removeAttributeNode() 方法返回被删除的属性，以 Attr 对象的形式。 */ </script> </body> </html>
如果仅仅只是添加类:document.getElementById("myDIV").classList.add("mystyle")