DOM兼容-elemen.dataset

最新推荐文章于 2023-03-23 23:05:09 发布

bp0002

最新推荐文章于 2023-03-23 23:05:09 发布

阅读量352

点赞数

分类专栏： DOM 文章标签： DOM dataset兼容

本文链接：https://blog.csdn.net/bp0002/article/details/77258138

版权

DOM 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

//Web前端学习-DOM

//引用：http://blog.csdn.net/qq_21794603/article/details/72732150

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>dataset兼容</title>
</head>
<body>
    <div class="class1" id="id1" data-name="dataname1" data-time="2017" data-account-name="ada" lang="en">
    Hello
    </div>
	<script>
		function dataset (ele) {     
	    	// if(ele.dataset){
		    //     return ele.dataset;
		    // }else{
		        var dataset = {};
		        // 获取标签内的所有属性，以空格分割    
		        var datastr = ele.outerHTML.split(">")[0];
		        console.log("目标属性HTML语句: " + datastr);
		        datastr = datastr.split(" ");
		        console.log("语句分割数组: " + datastr);
		        // 遍历 
		        var value, key, index, char0;       
		        for(var i = 0; i < datastr.length; i++){
		            //正则判断是否以data-开头  
		            console.log("---" + i + "---"); 
		            console.log(datastr[i]);      
		            if(/^data-/.test(datastr[i])){
		                key = datastr[i].split("=")[0].slice(5);
		                console.log("data-属性名：" + key);
				// 添加属性名处理
		                index = key.indexOf("-");
		                while(index > 0){
		                	char0 = key.substring(index + 1, index + 2);
		                	char0 = char0.toUpperCase();
		                	key   = key.replace(/-./, char0);
		                	index = key.indexOf("-");
		                }
		                console.log("data-属性名：" + key); 

		                value =  datastr[i].split("=")[1].slice(1,-1);
		                console.log("data-属性值：" + value); 
		                dataset[key] = value;
		            }
		        }
		        return dataset;
		    // }
		};

		var elem = document.getElementById("id1")
  		elemData = dataset(elem);
  		console.log(elemData);
	</script>
</body>
</html>