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

摘要:
DOCTYPE html˃动态获取属性。democlass{color:blue;}CoffeeTeaCoffeeTea/*第一个方法:返回指定属性名vargetAttr=document的属性值。getElementsByTagName[0]。getAttribute;document.getElementById.innerHTML=getAttr;*///第二种方法是使用Attr对象vargetAttr=document返回指定属性名称的属性值。getElementsByTagName[0]。getAttributeNode.value;document.getElementById.innerHTML=getAttr;//两个结果都返回child13。删除属性˂!

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动态创建、获取、删除属性的几种方式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇原生js使用getComputedStyle方法获取CSS内部属性值原生js动态添加新元素、删除元素方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JS-复选框全选与取消全选

checked:设置或者返回checkbox是否应被选中 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"&...

JSON与JS的区别以及转换

JSON是什么?(JSON和JavaScript对象有什么区别?)如何把JS对象转化为JSON字符串,又如何把JSON字符串转化为JavaScript对象? JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧。 JSON 是 JavaScript 原生格式, 这意味着在JavaScript 中处理 JSON...

js事件(上)

事件流:冒泡流 捕捉流 dom事件流 html指定事件处理程序 事件处理程序:on+event:onclick;onmouse;onload; 问题:在没载入代码时,点击元素会报错。html与js高度耦合。 dome0级指定事件 element.onclick="";绑定 element.onclic=null;删除 程序运行作用域在元素内部。 问题:...

jsp调用js文件时出现乱码

1.html中加上<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />.2.导入js时候设置一下charset<script language=JavaScript src="http://t.zoukankan.com/regcheckdata.js"...

JS取出两个数组中的不同

取出两个数组中的不同 var arr1 = [0,1,2,3,4,5]; var arr2 = [0,4,6,1,3,9]; function getArrDifference(arr1, arr2) { returnarr1.concat(arr2).filter(function(v, i, arr) { ret...

js几种生成随机颜色方法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">...