zoukankan      html  css  js  c++  java
  • 利用js_API 运行对html文档元素的属性的CRUD操作

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>对html元素属性的增删改查操作</title>
    <style>
    	#attr{text-align:center;font-size:24px;color:white;background:#008000;400px;height:30px; }
    	.myclass{background:#828555;}
    </style>
    </head>
    <body>
    	
    	<div id="attr" class = "attrs" lang = "en"  >对html元素属性的增删改查操作</div>
    	<hr />
    	<button id="getAttr" onclick="getAttr()">訪问DIV属性</button>
    	<button id="updateAttr" onclick="updateAttr()">改动DIV属性</button>
    	<button id="deleteAttr" onclick="deleteAttr()">删除DIV属性</button>
    	<button id="addAttr" onclick="addAttr()">添加DIV属性</button>
    	<script>
    		//简化打印
    		function print(str){
    			document.write(str+"<br/>");
    		}
    		//简化获取id
    		function $(id){
    			return document.getElementById(id);
    		}
    		//遍历元素属性
    		function listNodeList(attrList){
    			for (var i = 0; i < attrList.length; i++) {
    				print(attrList[i].nodeName+"--->"+attrList[i].nodeValue);
    			}
    		}
    		//訪问其属性
    		function getAttr(){
    			var divNode = $("attr"); 
    			var attrList = divNode.attributes;
    			print("属性名称--->属性值");
    			listNodeList(attrList);
    		}
    		//改动属性,两种方式,推荐前一种
    		function updateAttr(){
    			var divNode = $("attr"); 
    			//第一种
    			divNode.setAttribute("class","myclass"); //推荐这样的
    			//另外一种
    			/*
    			var attrList = divNode.attributes;
    			for (var i = 0; i < attrList.length; i++) {
    				if(attrList[i].nodeName == "class"){//假设属性值为class,我们就改动它
    					attrList[i].nodeValue = "myclass";
    					break;
    				}
    			}
    			listNodeList(attrList);//假设查看改动的属性值,打开凝视
    			*/
    		}
    		//删除指定属性
    		function deleteAttr(){
    			var divNode = $("attr"); 
    			divNode.removeAttribute("id");
    		}
    		//添加新的属性
    		function addAttr(){
    			var divNode = $("attr");	
    			var attrList = divNode.attributes;
    			divNode.setAttribute("title","mytitle");
    			listNodeList(attrList);
    		}
    	</script>
    </body>
    </html>
    
    
    
    
    
    
    
    
    
    
    

  • 相关阅读:
    微信小程序wx.request请求用POST后台得不到传递数据
    小程序的movable-view怎么持续移动
    当inline-block或者float失效的时候怎么弄
    js中如何删除json对象的某一个选项
    情非得已
    框架变量的问题
    隐式等待写法__和显示等待对比问题___及误区
    显式等待大结局___封装成API方便控制层调用
    显式等待第二集____灵活写法__
    显式等待__第一集___追加了误区
  • 原文地址:https://www.cnblogs.com/blfshiye/p/4081429.html
Copyright © 2011-2022 走看看