原生js动态创建、获取、删除属性的几种方式

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")

上一篇:原生Js 两种方法实现页面关键字高亮显示


下一篇:[转载] Thrift原理简析(JAVA)